Vuetify

ショップ

企業向け

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

フローティング・アクション・ボタンは、アプリケーションに促されたアクションを示すために、マテリアルに取り付けることができます。ほとんどの場合、デフォルトのサイズが使用されますが、似たようなサイズの要素との連続性を維持するために small バリアントを使用することができます。

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

視覚的にアピールするために、リストのアバターに合わせて小さなボタンを使用しています。

初めて表示されるとき、フローティングアクションボタンはアニメーション表示されます。ここでは、v-showで v-fab-transitionを使用します。 Vuetifyまたは独自のトランジションを使用することもできます。

speed-dial コンポーネントには、FABエクスペリエンスを正確にカスタマイズするための非常に堅牢なAPIがあります。

ボタンのデフォルトのアクションを変更する場合は、変更を示すトランジションを表示することをお勧めします。これを行うには、key propを、Vue トランジションシステムにアクションの変更を適切に知らせることができるデータにバインドします。これにはカスタムトランジションを使用することもできますが、mode propを out-in に設定してください。

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!