一. 底部导航栏 v-bottom-navigation
v-bottom-navigation 组件是侧边栏的替代品。 它主要用于移动应用程序,并且有三个变体: icons 和 text和 shift。
1. 基本用法
![](https://i-blog.csdnimg.cn/blog_migrate/457f9e1abf6940f120d421f82e8ac227.png)
<v-bottom-navigation v-model="selected">
<v-btn value="home">
<span>首页</span>
<v-icon>mdi-home</v-icon>
</v-btn>
<v-btn value="favorites">
<span>订阅</span>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn value="history">
<span>历史</span>
<v-icon>mdi-history</v-icon>
</v-btn>
<v-btn value="mine">
<span>我的</span>
<v-icon>mdi-human</v-icon>
</v-btn>
</v-bottom-navigation>
2. 颜色 color
可以设置颜色属性, 建议使用 light 和 dark 来正确对比文字颜色。