Bottom nav

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

Usage

While the bottom nav is meant to be used with the vue-router, you can also programmatically control the active state of the buttons by using the active.sync prop. You can change a button's value by using its value attribute.

API

v-bottom-nav
Name
absolute
Default
false
Type
boolean

Position the element absolutely

Name
active.sync
Default
undefined
Type
number | string

現在アクティブなボタンの値を保持します。特に値が設定されない場合は、index の値が代わりに使用されます。この prop は .sync 修飾子をサポートします。

Name
app
Default
false
Type
boolean

Components.BottomNavigation.

Name
color
Default
undefined
Type
string

コンポーネントに色を設定します。この色は、定義されている色の名前(例えばsuccesspurple)や、CSSの色指定(#033rgba(255, 0, 0, 0.5))を設定できます。

Name
dark
Default
false
Type
boolean

ダークテーマを適用します。

Name
fixed
Default
false
Type
boolean

Position the element fixed

Name
height
Default
56
Type
number | string

Components.BottomNavigation.

Name
light
Default
false
Type
boolean

ライトテーマを適用します。

Name
mandatory
Default
false
Type
boolean

Components.BottomNavigation.

Name
shift
Default
false
Type
boolean

Components.BottomNavigation.

Name
value
Default
undefined
Type
any

Components.BottomNavigation.

Examples

カラーとシフト

色の付いた背景の場合、 light を指定することが推奨されます。shift を指定すると非アクティブなボタンのテキストが非表示になります。v-btn のテキストは <span> タグでラップしておくことが推奨されます。

切り替え

他の Vuetify のコンポーネントと同じように、v-model を使用して表示するか否かを制御することができます。

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore