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

Usage

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

API

Examples

フラットボタン

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

レイズドボタン

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

ディプレスドボタン

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

ドロップダウン型ボタン

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

アイコン

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

フローティングボタン

フローティングボタンは丸く、多くの場合アイコンを含んでいます。

サイズ

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

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 | language on Github
Vuetify
StoreFor Enterprise