底部导航

v-bottom-nav组件是一个侧边栏的替代方案。它主要用于移动端,并有两个变种,图标+文本和转变。

用例

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
名称
absolute
默认值
false
类型
boolean

给元素设置绝对定位

名称
active.sync
默认值
undefined
类型
number | string

保持当前激活按钮的值,如果该按钮没有提供任何值,则将使用其索引。此属性支持.sync修饰符。

名称
app
默认值
false
类型
boolean

指定组件作为应用程序布局的一部分,用于动态调整内容的大小

名称
color
默认值
undefined
类型
string

将指定的色彩应用与控件

名称
dark
默认值
false
类型
boolean

应用暗黑主题变体

名称
fixed
默认值
false
类型
boolean

给元素设置固定定位

名称
height
默认值
56
类型
number | string

设置组件高度

名称
light
默认值
false
类型
boolean

应用明亮主题变体

名称
mandatory
默认值
false
类型
boolean

Components.BottomNavigation.

名称
shift
默认值
false
类型
boolean

不是激活状态时隐藏按钮上的文字

名称
value
默认值
undefined
类型
any

控制可见性

示例

色彩和转变

使用彩色背景时,建议使用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