Material Design风格神框架vuetify 学习笔记(五) bar

一. 应用栏 V-app-bar

v-app-bar组件通常是站点导航的主要来源。

App-bar组件与drawer配合使用，可以在应用程序中提供导航。

1. appbar的外观风格

(1). 内置风格

(2). 指定高度 height

此外, 我们还可以指定高度, 此高度会覆盖所有其他高度设定

    
      
      标题
    

(3). 圆角风格 rounded

(4). 指定背景图片 src

2. appbar的子组件

(1) 导航条按钮v-app-bar-nav-icon

(2) 导航条标题 v-app-bar-title

    
      
      标题
    

3. 位置

(1) . 固定位置 fixed

给组件应用 position: fixed
无论如何滚动, appbar永远置顶

    
      
      标题
    

(2). 页面绝对定位 absolute

应用 position: absolute 样式到组件.

(3). 页面浮动定位 floating

将 display: inline-flex 应用于组件。

4. 折叠 collapse

    
      
      标题
    

5. 滚动动作

(1). 滚动时折叠 collapse-on-scroll

    
      
      标题
    

(2). 滚动时隐藏

    
      
      标题
    

(3). 滚动时显示

(4). 加高bar滚动时缩小 shrink-on-scroll

(5). 加高bar滚动时淡出图片 fade-img-on-scroll

(6). 滚动时阴影加深 elevate-on-scroll

    
      
      标题
    

6. 插槽

appbar可以方便的通过插槽插入更加复杂的控件

(1). 插入图片 v-slot:img

    
      
      标题
      
    

(2). 插入扩展组件 v-slot:extension

    
      
      标题
      
    

7. 适合搭配appbar的组件

(1). 间隔 v-spacer

    
      
      标题
      
      mdi-antenna
      mdi-heart
    

(2). 目录 v-menu

    
      
      标题
      
      mdi-antenna
      mdi-heart
      
        

        
          
            选项1
          
          
            选项2
          
          
            选项3
          
        
      
    

二. 工具栏 v-toolbar

v-toolbar组件通常也是站点导航的主要来源。

v-toolbar组件与v-navigation-drawer和v-card配合使用非常有效。可以在应用程序中提供导航。

toolbar很多地方和appbar一致

1. toolbar的外观风格

(1). 内置风格

(2). 指定高度 height

此外, 我们还可以指定高度, 此高度会覆盖所有其他高度设定

    
      
      Title
    

(3). 圆角风格 rounded

(4). 指定背景图片 src

2. appbar的子组件

(1) 导航条按钮v-app-bar-nav-icon

和appbar用法一样

(2) 导航条标题 v-app-bar-title

和appbar用法一样

3. 位置

(1) . 固定位置 fixed

和appbar用法一样

(2). 页面绝对定位 absolute

应用 position: absolute 样式到组件.

(3). 页面浮动定位 floating

将 display: inline-flex 应用于组件。
特别适合用在组件之上浮动工具栏

4. 折叠 collapse

和appbar用法一样

5. 滚动动作

(1). 滚动时折叠 collapse-on-scroll

和appbar用法一样

(2). 滚动时隐藏

和appbar用法一样

(3). 滚动时显示

和appbar用法一样

(4). 加高bar滚动时缩小 shrink-on-scroll

和appbar用法一样

(5). 加高bar滚动时淡出图片 fade-img-on-scroll

和appbar用法一样

(6). 滚动时阴影加深 elevate-on-scroll

和appbar用法一样

6. 插槽

toolbar可以方便的通过插槽插入更加复杂的控件
和appbar用法一样

7. 应用举例: 跟随上下文操作

三. 系统栏 v-system-bar

v-system-bar 组件可以用于向用户显示状态。 它看起来像Android系统栏，可以包含图标、空格和一些文本

• lights-out 属性可以来降低不透明度

1. 类似手机状态栏风格

2. 类似windows窗口风格

    
      mdi-skull-scan
      新建文件夹
      
      mdi-minus
      mdi-checkbox-blank-outline
      mdi-close