ボトムシート
ボトムナビゲーションは vue-router と一緒に使われることを想定していますが、active.sync を使用することで、ボタンのアクティブ状態をプログラム的に制御することができます。ボタンの値を変更するには value 属性を使用します。
確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。
コンポーネントに position: absolute を適用します。
コンポーネントをアプリケーション レイアウトの一部として指定します。コンテンツのサイズを動的に調整するために使用されます。この小道具を使用するコンポーネントは、正常に機能するためにv-mainコンポーネントの 外側 に存在する必要があります。application page でレイアウトの詳細を確認できます。注: このpropは自動的にposition: fixed でレイアウト要素に適用されます。この機能は absolute propを使用して上書きできます。
コンポーネントの背景色を変更します。
指定された色をコントロールに適用します。利用できるのは色の名前 (たとえば、success または purple) または css 表記の色 (#033またはrgba(255, 0, 0, 0.5)) です。colors のページ で、組み込みクラスのリストが確認できます。
コンポーネントにダークテーマを適応します。詳しく知りたい場合は、Material Design documentationのdark themesを参照してください。
コンポーネントに position: fixed を適用します。
コンポーネントに高さを設定します。
上にスクロールすると、ナビゲーションが画面外に遷移します。
コンポーネントを表示するか非表示にするかを制御します。.sync 修飾子をサポートします。
コンポーネントにlightテーマを適用します。
値が常に選択状態であることを強制します (可能な場合)。
コンテンツの高さの最大値を設定します。
コンテンツの横幅の最大値を設定します。
コンテンツの高さの最小値を設定します。
コンテンツの横幅の最小値を設定します。
スクロール イベントの対象となる要素を指定する。デフォルトでは window を使用。
hide-on-scroll がアクティブになる前のスクロール距離
Holds the value of the currently active v-btn. If the button has no value supplied, its index will be used instead..
コンポーネントに横幅を設定します。
デフォルトの Vue slot
現在選択されているボタンの値。値が割り当てられていない場合は、ボタンの現在のインデックスになります。
anyinput-value.sync 用のイベント
string | numbermap-deep-get($headings, 'caption', 'size') !default;168px !default;80px !default;calc(100% - 22px) !default;calc(100% - 12px) !default;以下に、簡単な例から複雑な例まで示します。
color prop は、ボトムナビゲーションを背景に色を適用します。テキストの色を適切に対比するには、light と dark propを使用することをお勧めします。
v-bottom-navigation に grow プロパティが設定されている場合、その中のボタンは使用可能な領域を埋めるために拡張されます。
horizontal propは、アイコンの下に配置されるナビゲーションテキストを、アイコンの横に配置します。
shift prop は、ボタンのテキストをアクティブになるまで非表示にします。この機能は、v-btn テキストを <span> タグでラップする必要があります。
v-bottom-navigationの表示状態は、input-value propを使用して切り替えることができます。 v-modelを使用して現在アクティブなボタンを制御することもできます。
対象要素がスクロールしたときに v-bottom-navigation を非表示にします。
scroll-threshold プロパティを使用すると、v-bottom-navigation が消える前にスクロールできる閾値をカスタマイズできます。