# Bottom navigation(底部导航栏)

v-bottom-navigation 组件是侧边栏的替代品。 它主要用于移动应用程序,并且有三个变体: iconstextshift

# 使用

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-bottom-navigation 的显示状态可以使用 input-value prop 进行切换。 您也可以使用 v-model 来控制当前激活的按钮。

了解更多?

继续学习由 我们的团队 选择的相关内容,或通过使用下面的导航链接在页面之间跳转。
GitHub 上编辑此页面
最后更新:11/12/2024, 6:59:50 AM