v-btn コンポーネントは基本的な HTML におけるボタンをマテリアルデザインで置き換え、多数のオプションを提供します。 様々なカラーヘルパークラスを利用して、背景やテキストの色を変更することができます。

使い方

Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.

Options

API

サンプル

フラットボタン

フラットボタンは影と背景色を持ちません。ホバーした時のみに、ボタンの形状が表示されます。

レイズドボタン

レイズドボタンはクリックした時に広がる影を持ちます。これはデフォルトのスタイルです。

ディプレスドボタン

ディプレスドボタン背景色は変化しますが、影は持ちません。

ドロップダウン型ボタン

ドロップダウン型ボタンは、付加的なスタイリングがされた一般的な Select です。

アイコン

アイコンをボタンの主要なコンテンツとして使用することができます。

フローティングボタン

Floating buttons are rounded and usually contain an icon.

サイズ

ボタンにはさまざまなシナリオに合うように、異なったサイズのオプションを設定することができます。

Outlined

Outlined buttons inherit their borders from the current color applied.

Rounded

Rounded buttons behave the same as regular buttons but have rounded edges.

Tile

Tile buttons behave the same as regular buttons but have no border radius.

ブロックボタン

ブロックボタンは可能な限り横に広がります。

ローディング

loading prop を使用すれば、処理中であることをユーザーに通知することができます。デフォルトの振る舞いには v-progress-circular コンポーネントが使用されますが、これはカスタマイズすることができます。

Edit this page on Github | Translate on Crowdin
Vuetify
StoreFor Enterprise