v-btnコンポーネントはフローティング・アクション・ボタンとして使用できます。これにより、アプリケーションに主要なアクションポイントが提供されます。 v-speed-dialコンポーネントと組み合わせて、ユーザーが利用できるさまざまな機能セットを作成できます。
フローティング・アクション・ボタンは、アプリケーションに促されたアクションを示すために、マテリアルに取り付けることができます。ほとんどの場合、デフォルトのサイズが使用されますが、似たようなサイズの要素との連続性を維持するために small バリアントを使用することができます。
確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。
コンポーネントに position: absolute を適用します。
コンポーネントを下部に配置します。
スピード ダイヤルのコンテンツが表示される方向。指定できる値は、top, bottom, left, right です。
コンポーネントに position: fixed を適用します。
コンポーネントを左に配置します。
トランジション モードを設定します(transition-groupには適用されません)。詳細については、Vue のドキュメント トランジションモード を参照してください。
ホバー時にスピードダイヤルを開く
要素にトランジションの起点を設定します。 MDNドキュメントで for transition origin の詳細を参照できます。
コンポーネントを右に配置します。
コンポーネントを上部に配置します。
コンポーネントのトランジションを設定します。 組み込みトランジション のいずれか、または独自のものを使用できます。
コンポーネントを表示するか非表示にするかを制御します。
使用すると、クリック時 (または特定のコンポーネントではホバー時) にコンポーネントを有効にします。これにより手動でイベントの propagation を stop されます。この slot がない場合、モデル経由でコンポーネントを開いたときには、自分でイベントの propagation を stop する必要があります。
デフォルトの Vue slot
6px !default;16px !default;1 !default;以下に、簡単な例から複雑な例まで示します。
視覚的にアピールするために、リストのアバターに合わせて小さなボタンを使用しています。
初めて表示されるとき、フローティングアクションボタンはアニメーション表示されます。ここでは、v-showで v-fab-transitionを使用します。 Vuetifyまたは独自のトランジションを使用することもできます。
speed-dial コンポーネントには、FABエクスペリエンスを正確にカスタマイズするための非常に堅牢なAPIがあります。
ボタンのデフォルトのアクションを変更する場合は、変更を示すトランジションを表示することをお勧めします。これを行うには、key propを、Vue トランジションシステムにアクションの変更を適切に知らせることができるデータにバインドします。これにはカスタムトランジションを使用することもできますが、mode propを out-in に設定してください。