# Bottom navigation

v-bottom-navigation コンポーネントはサイドバーに代わるコンポーネントです。 主にモバイルアプリケーションに使用され、 iconstextshiftの3つのバリエーションがあります。

# 使い方

v-bottom navigationvue-routerと一緒に使用することを意図していますが、valueプロパティを使って、ボタンのアクティブな状態をプログラムで制御することもできます。 v-bottom-navigation では、ボタンにはその_index_のデフォルト値が与えられます。

# API

# サンプル

# Props

# Color

The color prop applies a color to the background of the bottom navigation. lightdarkプロパティを使用し、テキストの色を適切に対比させることをお勧めします。

# 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-bottom-navigation の表示状態は、 input-value プロパティを使用して切り替えることができます。 v-model を使用して現在アクティブなボタンを制御することもできます。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:07/05/2022, 9:08:15 PM