v-btn コンポーネントは基本的な HTMLにおけるボタンをマテリアルデザインで置き換え、多数のオプションを提供します。 様々なカラーヘルパークラスを利用して、背景やテキストの色を変更することができます。
最も単純な形式のボタンには、大文字のテキスト、わずかな高さ、ホバー効果、クリック時の波紋エフェクトが含まれます。
確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。
コンポーネントに position: absolute を適用します。
リンクがアクティブなときに適用されるアクティブなCSSクラスを構成します。vue-routerのドキュメントで active-class prop の詳細をご覧ください。
append propを設定すると、常に現在のパスに相対パスが追加されます。vue-router のドキュメントで append prop の詳細についてをご覧ください。
ボタンを使用可能なスペースの最大限まで広げます。
コンポーネントを下部に配置します。
指定された色をコントロールに適用します。利用できるのは色の名前 (たとえば、success または purple) または css 表記の色 (#033またはrgba(255, 0, 0, 0.5)) です。colors のページ で、組み込みクラスのリストが確認できます。
コンポーネントにダークテーマを適応します。詳しく知りたい場合は、Material Design documentationのdark themesを参照してください。
ボタンの影を削除します。
コンポーネントをクリックまたはターゲットにできなくします。
コンポーネントに適用される高さを0〜24の範囲で指定します。詳細は、elevation のページで確認できます。
リンクと完全に一致します。これがなければ、'/' はすべてのルートにマッチします。exact prop の詳細については、vue-router のドキュメントを参照してください。
完全一致のリンクがアクティブな場合に適用されるアクティブな CSS クラスを設定します。exact-active-class prop の詳細については、vue-router のドキュメントをご覧ください。
ボタンを丸い floating-action-button として指定します。
コンポーネントに position: fixed を適用します。
コンポーネントに高さを設定します。
コンポーネントをアンカーとして指定し、href 属性を適用します。
ボタンをアイコンとして丸くフラットにします。
ボタンの有効状態を制御します。
コンポーネントをlargeにします。
コンポーネントを左に揃えます。これは absolute もしくは fixed props と共に使うべきです。
コンポーネントにlightテーマを適用します。
コンポーネントがリンクであることを指定します。これは href または to propを使用する場合は自動的に行われます。
ローディングアニメーションを追加します。
コンテンツの高さの最大値を設定します。
コンテンツの横幅の最大値を設定します。
コンテンツの高さの最小値を設定します。
コンテンツの横幅の最小値を設定します。
背景を透明にし、細い境界線を適用します。
replace propを設定すると、クリックされたときに router.push() の代わりに router.replace() が呼び出されるため、ナビゲーションは history レコードを残しません。replace prop の詳細については、vue-routerのドキュメントをご覧ください。
クリック時のぼかしを無効化します。
コンポーネントを左に揃えます。これは absolute もしくは fixed props と共に使うべきです。
ボタンの境界線に大きな半径を適用します。
Applies a large border radius on the top left and bottom right of the card.
コンポーネントをsmallにします。
コンポーネント内で使用するカスタムタグを指定します。
ターゲット属性を指定します。これは href propを使用する場合にのみ適用する必要があります。
背景を透明にします。
Removes the component's border-radius.
リンクのターゲットルートを示します。to prop の詳細については、vue-routerのドキュメントをご覧ください。
コンポーネントを上部に配置します。
ボタンの type 属性を設定します。
コンポーネントがグループ内で選択されたときに使われる値です。もし指定しなかった場合、index が使用されます。
コンポーネントに横幅を設定します。
コンポーネントをextra largeにします。
コンポーネントをextra smallにします。
デフォルトの Vue slot
カスタムローダー
コンポーネントがクリックされたときに発生するイベント
Event0.18 !default;$border-radius-root !default;0.24 !default;map-deep-merge(
(
'x-small': .625rem,
'small': .75rem,
'default': .875rem,
'large': .875rem,
'x-large': 1rem
),
$btn-font-sizes
);500 !default;0.08 !default;18px !default;12px !default;.0892857143em !default;thin !default;28px !default;map-deep-merge(
(
'x-small': 20,
'small': 28,
'default': 36,
'large': 44,
'x-large': 52
),
$btn-sizes
);uppercase !default;opacity 0.2s map-get($transition, 'ease-in-out') !default;0.28s !default;map-get($transition, 'fast-out-slow-in') !default;map-deep-merge(
(
'x-small': 18,
'small': 24,
'default': 24,
'large': 28,
'x-large': 32
),
$fab-icon-sizes
);map-deep-merge(
(
'x-small': 32,
'small': 40,
'default': 56,
'large': 64,
'x-large': 72
),
$fab-sizes
);v-btn は dark prop を使用したときに振る舞いが変化する唯一のコンポーネントです。通常のコンポーネントは dark prop を使用して暗い色の背景であることを明示し、テキストを白に変更する必要があります。しかし、v-btn では自動的にスタイルが変化するので、ボタンが白い背景と組み合わせて無効化されているときなど、色のついた背景の上に置かれているときのみこの prop を使用することをおすすめします。白いテキストが必要な場合は、ただ white-text クラスを追加するだけでテキストを白くできます。
以下に、簡単な例から複雑な例まで示します。
テキストボタンは影と背景色を持ちません。ホバーした時のみに、ボタンの形状が表示されます。
レイズドボタンはクリックした時に広がる影を持ちます。これはデフォルトのスタイルです。
ディプレスドボタン背景色は変化しますが、影は持ちません。
ドロップダウン型ボタンは、スタイルが付与された一般的な Select です。
アイコンをボタンの主要なコンテンツとして使用することができます。
フローティングボタンは丸く、多くの場合アイコンを含んでいます。
ボタンにはさまざまなシナリオに合うように、異なったサイズのオプションを設定することができます。
アウトラインボタンは現在適用されている色を引き継いだ境界線を表示します。
ラウンドボタンは、通常のボタンと同じように動作する、丸みを帯びたエッジのボタンです。
タイルボタンは、通常のボタンと同じように振る舞う、枠がないボタンです。
ブロックボタンは可能な限り横に広がります。
loading prop を使用すれば、処理中であることをユーザーに通知することができます。デフォルトの振る舞いには v-progress-circular コンポーネントが使用されますが、これはカスタマイズすることができます。