Button
v-btn コンポーネントは基本的な HTML におけるボタンをマテリアルデザインで置き換え、多数のオプションを提供します。 様々なカラーヘルパークラスを利用して、背景やテキストの色を変更することができます。
API
Components.Buttons.
Components.Buttons.
Components.Buttons.
ボタンを使用可能なスペースの最大限まで広げます。
Components.Buttons.
コンポーネントに色を設定します。この色は、定義されている色の名前（例えばsuccessやpurple）や、CSSの色指定（#033やrgba(255, 0, 0, 0.5)）を設定できます。
ダークテーマを適用します。
ボタンの影を削除します。
Components.Buttons.
Components.Buttons.
Components.Buttons.
ボタンを丸くします。
Components.Buttons.
ボタンの背景色を削除します。
Components.Buttons.
ボタンをアイコンとして丸くフラットにします。
ボタンの有効状態を制御します。
ボタンのサイズを大きくします。
Components.Buttons.
ライトテーマを適用します。
ローディングアニメーションを追加します。
Components.Buttons.
ボタンを境界線で表現します。
Components.Buttons.
Components.Buttons.
Components.Buttons.
ボタンの両端が丸くなります。
ボタンを小さくします。
Components.Buttons.
Components.Buttons.
Components.Buttons.
Components.Buttons.
ボタンの属性を設定します。
Components.Buttons.
Examples
フラットボタン
フラットボタンは影と背景色を持ちません。ホバーした時のみに、ボタンの形状が表示されます。
レイズドボタン
レイズドボタンはクリックした時に広がる影を持ちます。これはデフォルトのスタイルです。
ディプレスドボタン
ディプレスドボタン背景色は変化しますが、影は持ちません。
ドロップダウン型ボタン
ドロップダウン型ボタンは、付加的なスタイリングがされた一般的な Select です。
アイコン
アイコンをボタンの主要なコンテンツとして使用することができます。
フローティングボタン
フローティングボタンは丸く、多くの場合アイコンを含んでいます。
ローディング
loading prop を使用すれば、処理中であることをユーザーに通知することができます。デフォルトの振る舞いには v-progress-circular コンポーネントが使用されますが、これはカスタマイズすることができます。
サイズ
ボタンにはさまざまなシナリオに合うように、異なったサイズのオプションを設定することができます。
アウトラインボタン
アウトラインボタンは現在適用されている色を引き継いだ境界線を表示します。
ラウンドボタン
ラウンドボタンは通常のボタンと同じように振る舞いますが、角が丸くなります。
ブロックボタン
ブロックボタンは可能な限り横に広がります。