# Bottom navigation(底部导航栏)
v-bottom-navigation
组件是侧边栏的替代品。 它主要用于移动应用程序,并且有三个变体: icons 和 text和 shift。
# 使用
While v-bottom navigation
is meant to be used with vue-router, you can also programmatically control the active state of the buttons by using the value property. 按钮的 index 具有v-bottom-navigation
的默认值。
# API
# 示例
# 属性
# 颜色
The color prop applies a color to the background of the bottom navigation. 我们建议使用 ** light ** 和 ** dark ** props 来正确对比文字颜色。
# 长大
使用 ** grow ** 属性强制 v-btn 组件 填充 所有可用的空间。 按钮的最大宽度为 168px 。根据 MD底部导航规格。
# 滚动时隐藏
v-bottom-navigation
组件在 滚动 时使用 hide-on-scroll 属性隐藏。 这类似于<a href=“/components/app bars/”>v-app-bar支持的<a href=“https://material.io/archive/guidelines/patterns/scrolling-technologies.html">滚动技术。 在下面的示例中,上下滚动 以查看此行为。
# 水平布局
使用 ** horizontal ** prop来调整按钮和图标的样式。 此操作将按钮文本与提供的v-icon内联。
# 滚动阈值
修改 scroll-threshold 属性,以增加用户在隐藏 v-bottom-navigation
之前必须滚动的距离。
# 上档
** shift ** prop 隐藏未激活时的按钮文本。 这为 v-bottom-navigation
组件这提供了另一种视觉样式。
要使其正常工作,v-btn
文本需要被包装在一个span
标签中。
# 切换
v-bottom-navigation
的显示状态可以使用 input-value prop 进行切换。 您也可以使用 v-model 来控制当前激活的按钮。