Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表

一. 按钮 (V-BTN)

参考文档:
https://vuetifyjs.com/zh-Hans/components/buttons/
https://vuetifyjs.com/zh-Hans/api/v-btn/

1. 按钮的颜色

我们可以用class 或者 color来控制按钮的颜色

    text
    text
    text
    text

也可以使用系统颜色:

     success 
     info 
     error 
...

2. 按钮样式

(1). 扁平化按钮 (depressed )

text

(2). 透明背景按钮 (plain )

text

(3). 轮廓线按钮 (outlined)

text

(4). 圆角按钮 (rounded )

text

(5). 圆形浮动按钮 (fab)

text

(6). 文本按钮 (text)

文本按钮没有华丽的样式, 颜色属性只设置文本颜色

text

(7). 凸起的按钮 raised

凸起的按钮有更夸张的阴影和点击效果

text

点击时有递增的阴影

(8). 瓷砖按钮(无圆角按钮) tile

text

3 . 图标按钮

    
      mdi-heart
    
    
      mdi-email
    

4. 按钮的尺寸

属性	说明
x-small	特小
small	小
normal	正常(默认)
large	大
x-large	特大
block	将按钮扩大到可用空间的 100％

     x-small 
     small 
     normal 
     large 
     x-large 
     block 

5. 按钮加载中和失效

 TEXT 
 disabled 

6. 按钮点击事件

vue 老规矩, @click处理点击事件

7. 超链接 href

 百度一下 

二. 图标 v-icon

1. 图标的颜色

参考按钮的颜色

2. 和按钮结合使用

    
      Accept
       mdi-checkbox-marked-circle 
    
    
       mdi-minus-circle Cancel
    
    
      mdi-thumb-up
    

    
      mdi-thumb-down
    

三. 列表 v-list

v-list 组件用于显示信息。 它可以包含头像、内容、操作、列表组标题等等。 列表以易于在集合中识别特定项目的方式显示内容。 它们为组织一组文本和图像提供了一致的样式。

1. 列表相关标签

(1). 列表标签 v-list

基本列表标签

(2). 列表组标签 v-list-group

有了group才能点击

重要属性

• sub-group : 将组件指定为嵌套列表组
• no-action : 从组项目中删除分配给操作图标的左边距
• eager : 将强制组件内容在加载时呈现。如果存在内容的话，则不会在 DOM 中渲染，如果你想优化 SEO，这是非常有用的。

(3). 列表项目组 v-list-item-group

有了group才能点击

重要属性

• value : 选定的条目 可以用v-modle绑定
• multiple : 多选
• max : 最大多选数

(4). 列表项目 v-list-item

重要属性

• link : 指定组件为链接。当使用 href 或 ** to ** 属性时，这是自动的设置的。
• href : 指定组件为锚点并应用 href 属性
• target : 指定 target 属性。只在使用 href 属性时应用
• inactive: 不活跃,如果设置了该属性，即使有to/href或者@click，列表块也不会响应链接。
• selectable : 允许在 v-list-item 中选择文本。
• to : 表示链接的目标路由。

(5). 列表项目内容 v-list-item-content

(6). 列表项目头像 v-list-item-avatar

重要属性

• rounded: 对指定的组件应用 border-radius 样式。
• left : 指定头像在组件左侧。
• rigth: 指定头像在组件的右侧。
• horizontal : 使用另一种水平样式。

(7). 列表项目图标 v-list-item-icon

(8). 列表项目标题 v-list-item-title

(9). 列表项目副标题 v-list-item-subtitle

(10). 列表项目动作插槽 v-list-item-action

(11). 列表项目动作插槽文本 v-list-item-action-text

2. v-list-item的单行/双行/三行

列表有三种基本形式。 单行 (默认), 双行 和 三行.

3. 列表的样式

(1). 紧凑型列表 dense

    
      
        
          
            mdi-clock
          
          
            历史记录
          
        
      
    

(2). 扁平化列表 flat

    
      
        
          
            mdi-clock
          
          
            历史记录
          
        
      
    

(3). 圆角风格

(4). 各种形状风格 shaped

4. 列表的典型的应用

数据驱动生成版

5. 列表的嵌套

      
        
          
            mdi-clock
          
          
            历史记录
          
        
        
          
            mdi-email
          
          
            联系我们
            
              
                
                  mdi-home
                
                
                  上海事业部
                
              
              
                
                  mdi-home
                
                
                  广州事业部
                
              
            
          
        
      
    

6. 列表多选 multiple

    
      
        
          
            mdi-gesture-tap-button
          
          
            熊爸天下
            Jan 10,2014 超级奶爸
          
        
        
          
            mdi-heart
          
          
            anny
            Dec 8,2014 可爱宝宝
          
        
      
    

7. 可扩展列表插槽 v-slot:activator

列表可以包含一组项目，这些项目将利用 v-item-group 的激活器插槽在点击时显示。 在 v-navigation-drawer 组件中也使用了扩展列表.

8. 带操作的列表

• 利用 v-list-item-group，轻松将操作连接到您的磁贴。

    
      
        
          
            mdi-gesture-tap-button
          
          
            熊爸天下200
            Jan 10,2014 超级奶爸
          
        
        
          
        
      
    

9. 列表禁用 disabled

10. 列表标题 subheader

    
      用户信息
      
        
          
            mdi-gesture-tap-button
          
          
            熊爸天下
            Jan 10,2014 超级奶爸
          
        
        
          
            mdi-heart
          
          
            anny
            Dec 8,2014 可爱宝宝
          
        
      
    

11. 列表跳转路由

我们只需要在 v-list-item上加上 to属性绑定好路由即可