Vuetify

商店

企业版

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

尽管底部导航栏原应与 vue-router 配合使用,但你也可以使用active.sync 属性来以编程方式控制按钮的激活状态。你可以使用按钮的 value 标签来更改它的值。

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

color 属性会给底部导航栏的背景应用颜色。建议使用 lightdark 属性来提高与文本的对比度。

如果 v-bottom-navigationgrow 属性,其内的按钮会扩大并填满可用空间。

horizontal 属性将导航文本置于与图标水平的附近位置。

shift 属性将在按钮没被激活时隐藏它的文本。需用 <span> 包围 v-btn 的文本。

v-bottom-navigation 的显示状态可使用 input-value 属性来控制。你也可以使用 v-model 来控制当前已经激活的按钮。

当目标元素滚动时,“滚动时隐藏”会隐藏 v-bottom-navigation

scroll-threshold 属性可以自定义触发 v-bottom-navigation 消失的滚动阈值。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!