# Buttons: Floating Action Button

v-btn コンポーネントは、フローティングアクションボタンとして使用できます。これは、アプリケーションに主要な操作のポイントを提供するものです。 v-speed-dial コンポーネントと組み合わせると、ユーザーに提供するさまざまな機能のセットを作成できます。

# 使い方

フローティングアクションボタンは、アプリケーションの中心的な操作を案内するためにコンテンツに配置することができます。ほとんどの場合、デフォルトのサイズを使用して構いませんが、同じようなサイズの要素との連続性を維持する場合は small のバリエーションを指定します。

# API

# サンプル

# その他

# アニメーション表示

画面に初めて表示するとき、フローティングアクションボタンにはアニメーションを適用するとよいでしょう。ここでは v-show と v-fab-transition を指定しています。 Vuetifyが提供する任意のカスタムトランジションや独自のトランジションを使用することもできます。

# 横長のスクリーン

ボタンのデフォルトの動作を切り替える場合は、変更があることを表現するトランジションを加えることをお勧めします。これを行うには、アクションが変更されることを Vue のトランジション機構に適切に伝達するため、key prop にデータをバインドします。このときカスタムのトランジションを使用することができますが、mode prop には out-in を指定してください。

# 小さいバリエーション

視覚的に目立たせるため、リストのアバターにはそれに合う小さなボタンを使用します。

# スピードダイヤル

speed-dial コンポーネントは、FABのインターフェイスを狙い通りにカスタマイズするための堅牢な API を備えます。

準備はできましたか？

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーションリンクでページ間を移動できます。

GitHub でこのページを編集する

最終更新日:10/07/2024, 11:31:37 AM