Vuetify

ショップ

企業向け

ボトムシート

ボトムナビゲーションは vue-router と一緒に使われることを想定していますが、active.sync を使用することで、ボタンのアクティブ状態をプログラム的に制御することができます。ボタンの値を変更するには value 属性を使用します。

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

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

color prop は、ボトムナビゲーションを背景に色を適用します。テキストの色を適切に対比するには、lightdark propを使用することをお勧めします。

v-bottom-navigationgrow プロパティが設定されている場合、その中のボタンは使用可能な領域を埋めるために拡張されます。

horizontal propは、アイコンの下に配置されるナビゲーションテキストを、アイコンの横に配置します。

shift prop は、ボタンのテキストをアクティブになるまで非表示にします。この機能は、v-btn テキストを <span> タグでラップする必要があります。

v-bottom-navigationの表示状態は、input-value propを使用して切り替えることができます。 v-modelを使用して現在アクティブなボタンを制御することもできます。

対象要素がスクロールしたときに v-bottom-navigation を非表示にします。

scroll-threshold プロパティを使用すると、v-bottom-navigation が消える前にスクロールできる閾値をカスタマイズできます。

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

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