# Buttons

v-btn コンポーネントは、標準の HTML のボタンをマテリアルデザインのテーマと多数のオプションを備えたボタンで置き換えます。 背景やテキストの色は、任意のカラーヘルパークラスを使って変更できます。

# 使い方

大文字のテキスト、わずかな浮き上がり、ホバー効果、クリック時の波紋エフェクトを含むボタンは、最も単純な形式のボタンです。

# API

# 注意事項

# サンプル

# Props

# Block

block を指定すると、ボタンは利用できる幅いっぱいに広がります。

# Depressed

depressed を指定すると、ボタンの背景色は維持されますが、ボックスに影が付かなくなります。

# フローティングボタン

フローティングボタンは丸いデザインで、通常、アイコンを含みます。

# Icon

アイコンは、ボタンのメインのコンテンツとして使用できます。 icon prop を指定すると、ボタンが丸いデザインになり、text prop のスタイルがボタンに適用されます。

# Loading

loading prop を指定すると、ユーザーに処理中であることを伝えることができます。 デフォルトの動作では v-progress-circular コンポーネントが使用されますが、カスタマイズすることもできます。

# Outlined

outlined を指定すると、現在ボタンに適用されている色を継承した境界線が表示されます。

# Plain

plain を指定すると、hoverfocus に反応するベースラインの不透明度が低くなります。

# Rounded

rounded を指定すると、ボタンの角が丸くなります。動作は通常のボタンと変わりません。

# サイズ

さまざまな用途に合うように、ボタンには異なるサイズを設定することができます。

# Text

テキストボタンは、ボックスの影と背景を持ちません。 ホバーしたときだけボタンのコンテナが表示されます。 color prop を使用すると、指定した色が、背景ではなくボタンのテキストに適用されます。

# Tile

tile を指定すると、ボタンの角の丸みがなくなります。動作は通常のボタンと変わりません。

# その他

# Raised

raised を指定すると、ボックスに影が付き、クリック時に影が濃くなります。 これはデフォルトのスタイルです。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:10/07/2024, 11:31:37 AM