Material Design风格神框架vuetify 学习笔记(七) 基础组件3 抽屉 卡片

一. 导航抽屉 v-navigation-drawer

v-navigation-drawer是用户用于导航应用程序的组件。
导航抽屉被预先配置为可以在有或没有 vue-router 的情况下使用。 在应用程序中，通常会把 v-navigation-drawer 组件作为 v-app 的直接子组件。

1. 抽屉的显示和隐藏 v-model绑定

要控制抽屉的显示和隐藏, 我们使用v-model来绑定一个标志位参数

2. 抽屉的样式

(1). app化动态调整

组件作为应用程序布局的一部分。用于动态调整内容的大小。

      hello
    

值得注意的是, 它是会根据设备宽度(设备类型)自动调整行为的

(2). 折叠式 clipped

    
      hello
    

(3). 隐藏蒙版 hide-overlay

(4). 修改遮罩蒙版 overlay-color/overlay-opacity

我们可以使用overlay-color更改遮罩颜色
使用overlay-opacity更改遮罩透明度

(5). 缩小化抽屉 mini-variant

我们还可以使用 mini-variant-width来控制最小宽度

(6). hover展开 expand-on-hover

平时会默认缩小,鼠标hover时才会展开

(7). 右侧抽屉 right

(8). 抽屉背景 src

(9). 底部弹出 bottom

底部弹出只有在在移动设备上从屏幕底部展开(只能遇到 mobile-breakpoint 时激活), 有没有app属性也会影响其行为

无app属性

有app属性

(10). 不管屏幕尺寸如何, 抽屉都可以看到 permanent

肯定能看到, 连v-modle都不好使了

3.append插槽

二. 卡片组件

1. 卡片相关组件

(1). 卡片 v-card

(2). 卡片标题 v-card-title

(3). 卡片副标题 v-card-subtitle

(4). 卡片文本 v-card-text

(5). 卡片动作 v-card-actions

用于为卡片放置 动作 的容器

    
      
        
          
        
        熊爸天下
      
       超级奶爸 
      
        lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet,
        consectetur, lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor
        sit amet, consectetur
      
    

2. 卡片的样式

(1). 外轮廓线样式 outlined

(2). 形状的样式 shaped

(3). 瓦片样式 tile

3. 卡片的禁用 disabled

4. 卡片的加载状态 loading

5. 和v-expand-transition配合实现弹出动画卡片

配合css实现详情卡