Vuetify

ショップ

企業向け

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

最も単純な形式のボタンには、大文字のテキスト、わずかな高さ、ホバー効果、クリック時の波紋エフェクトが含まれます。

Options

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

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

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

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

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

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

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

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

アウトラインボタンは現在適用されている色を引き継いだ境界線を表示します。

ラウンドボタンは、通常のボタンと同じように動作する、丸みを帯びたエッジのボタンです。

タイルボタンは、通常のボタンと同じように振る舞う、枠がないボタンです。

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

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

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!