# Bottom navigation
v-bottom-navigation コンポーネントはサイドバーに代わるコンポーネントです。 主にモバイルアプリケーションに使用され、 icons と text、 shiftの3つのバリエーションがあります。
# 使い方
v-bottom navigation は vue-routerと一緒に使用することを意図していますが、valueプロパティを使って、ボタンのアクティブな状態をプログラムで制御することもできます。 v-bottom-navigation では、ボタンにはその_index_のデフォルト値が与えられます。
# API
# サンプル
# Props
# Color
The color prop applies a color to the background of the bottom navigation. lightとdarkプロパティを使用し、テキストの色を適切に対比させることをお勧めします。
# Grow
growプロパティを使用すると、v-btnコンポーネントが利用可能なすべてのスペースを_埋める_(fill) ようになります。 ボタンの最大幅は、Bottom Navigation MD specificationでは168pxとなっています。
# Hide on scroll （スクロール時に非表示にする ）
v-bottom-navigationコンポーネントは、hide-on-scrollプロパティを使用すると、上へスクロールしたときに非表示になります。 これは v-app-barでサポートされているスクロールテクニックに似ています。 次の例で、上下にスクロールして動作を確かめてみてください。
# Horizontal
horizontal propを使って、ボタンやアイコンのスタイルを調整することができます。 これは与えられたv-iconとともにボタンテキストをインラインで配置します。
# Scroll threshold （スクロールの閾値）
scroll-thresholdプロパティを変更して、v-bottom-navigation が隠されるまでにユーザーがスクロールしなければいけない距離を長くします。
# Shift
shift プロパティは、アクティブでないときにボタンのテキストを非表示にします。 これにより、 v-bottom-navigation コンポーネントに代わるビジュアルスタイルが提供されます。
この機能を動作させるためには、v-btn のテキストを span タグで囲む 必要 があります。
# 切り替え
v-bottom-navigation の表示状態は、 input-value プロパティを使用して切り替えることができます。 v-model を使用して現在アクティブなボタンを制御することもできます。