v-bottom-navigation はサイドバーの代わりに使用することができます。主にモバイルで使用され、アイコンとテキスト、そしてシフトの2種類が用意されています。

使い方

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

API

サンプル

The color prop applies a color to the background the bottom navigation. It is recommended to use the light and dark props to properly contrast text color.

Grow

If v-bottom-navigation has grow property, buttons within it grow to fill available space.

Horizontal

The horizontal prop, places nav text next to the icon as appose to beneath it.

Shift

The shift prop will hide the button text until active. For this to work, v-btn text is required to be wrapped in a <span> tag.

切り替え

The display state of v-bottom-navigation can be toggled using the input-value prop. You can also control the currently active button using v-model.

Hide on scroll

Hide-on-scroll hides v-bottom-navigation when target element is scrolled.

Scroll threshold

scroll-threshold property allows you to customize the threshold you can scroll before v-bottom-navigation disappears.

Edit this page on Github | Translate on Crowdin
Vuetify
StoreFor Enterprise