底部导航栏 (Bottom navigation)

v-bottom-navigation 组件是侧边栏组件的另一种替换。它主要用于移动应用程序，并且有三个变体： icons 和 text 和 shift

使用

虽然 v-bottom navigation 旨在与 vue-router 一起使用 ，您还可以使用 value 属性以编程方式控制按钮的活动状态。使用 v-bottom-navigation 为按钮指定其索引的默认值。

API

组件	描述
v-bottom-navigation	主要组件
v-btn	用于控制 v-bottom-navigation 状态的子组件

INFO

For styles to apply properly when using the shift prop, v-btn text is required to be wrapped in a span tag. 为了在使用 shift 属性时正确应用样式，需要将 v-btn 文本包含在 span 标签中。

示例

属性

颜色

color 属性将颜色应用于底部导航的背景。我们建议使用 light 和 dark 属性来正确对比文本颜色。

长大

使用 grow 属性强制 v-btn 组件以填充所有可用空间。根据 底部导航 MD 规范，按钮的最大宽度为 168px。

水平布局

使用 horizontal 属性调整按钮和图标的样式。这会将按钮文本放置在与提供的 v-icon 内嵌的位置 。

上档

shift 属性在未激活时隐藏按钮文本。这为 v-bottom-navigation 组件提供了另一种视觉样式。

INFO

For this to work, v-btn text is required to be wrapped in a span tag.

切换

因为 v-bottom-navigation 支持 v-model，所以使用 active 属性可以控制它的显示状态。