Material Design风格神框架vuetify 学习笔记(十三) 底部导航栏 底部工作表

一. 底部导航栏 v-bottom-navigation

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

1. 基本用法

<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 来正确对比文字颜色。