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

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

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

1. 基本用法

    
      
        首页
        mdi-home
      
      
        订阅
        mdi-heart
      
      
        历史
        mdi-history
      
      
        我的
        mdi-human
      
    

2. 颜色 color

可以设置颜色属性, 建议使用 light 和 dark 来正确对比文字颜色。

3. 宽度 grow

4. 水平布局 horizontal

让图标和按钮文本水平对齐

5. 上档 shift

隐藏未激活时的按钮文本, 这种效果动画过渡很好

二. 底部工作表 v-bottom-sheet

类似于抽屉效果, 只不过是从底部弹出

1. 基本功能 (用插槽实现弹出按钮)

2. 基本功能 (用按钮事件实现弹出)

3. 关闭蒙版关闭功能 persistent

4. 控制宽度 inset

5. 例: 列表中打开