一. 头像 v-avatar

v-avatar 组件通常用于显示循环用户个人资料图片。此组件将允许您动态尺寸并添加响应图像、图标和文字的边框半径。

XB

1. 头像的样式

(1). 默认圆形

(2). 圆角矩形 rounded

XB

(3). 瓦片 tile

XB

2. 头像的大小 size

XB

size="avatarSize"

3. 图片头像/图标头像

    
      
    
    
      mdi-heart

4. 和其他控件组合

    
      
      
        
          {{ item.key }}

二. 扩展面板 v-expansion-panel

v-expansion-panel 组件有助于减少大量信息的垂直空间占用。组件的默认功能是仅显示一个扩展面板；然而，使用 multiple 属性后，扩展面板可以保持打开，直到显式地关闭。

1. 扩展面板相关组件

(1). 扩展面板 v-expansion-panels

(2). 单个扩展面板 v-expansion-panel

(3). 扩展面板标头 v-expansion-panel-header

(4). 扩展面板内容 v-expansion-panel-content

2. 典型应用

3. 扩展面板的样式

(1). 手风琴 accordion

accordion 属性激活时，当前扩展面板周围不会有边距。

    
      
         {{ item.name }} 
        
          {{ item.desc }}

(2). 缩进 inset

inset 属性激活时，当前扩张面板变得更小。

(3). 弹出 popout

4. 多开 multiple

5. v-model控制开合


...
show: [0,2],

6. 自定义下拉图标

    
      
        
          {{ item.name }}
          
        
        
          {{ item.desc }}

可以看到, 上面的图标自动翻转了, 这很方便, 但有时我们不需要

去除下拉图标反转

我们只需要将v-expansion-panel-header 中添加disable-icon-rotate属性即可

三. 消息条 v-snackbar

v-snackbar 组件用于向用户显示快速消息。 Snackbars 支持定位、移除延迟和回调。

1. 最简单的消息条

2. 可关闭消息条

我们把按钮放在action插槽中, 以实现关闭功能

3. 消息条的样式

(1). 轮廓线样式 outlined

(1). 文本样式 text

(3). shaped样式

(4). 药丸样式 rounded

(5). 多行消息条 multi-line

multi-line 属性扩展了 v-snackbar 的高度，让您有更多的内容空间。

4. 消息条自动超时 timeout

timeout 属性自定义 v-snackbar 自动隐藏的延迟。单位ms

timeout设置为 -1可以永不关闭

四. 评分

1. 简单的评分

2. 绑定数据

3. 评分的颜色/背景颜色 color/background-color

4. 悬停 hover

5. 半星 half-increments

6. 只读 readonly

7. 评分的图标 empty-icon/full-icon/half-icon

评分图标其实可以随意设定, 但个人感觉,只有成套的才有意义, 下面列举最有意义的material Design图标

(1). 空图标 empty-icon

mdi-circle-outline
mdi-heart-outline
mdi-shield-outline
mdi-star-outline

(2). 半星图标 half-icon

mdi-circle-half-full
mdi-heart-half-full
mdi-shield-half-full
mdi-star-half-full

(3). 满图标 full-icon

mdi-circle
mdi-heart
mdi-shield
mdi-star

8. 图标大小 size

small
large
x-large
size="64"

Material Design风格神框架vuetify 学习笔记(八) 基础组件4 头像 扩展面板 消息条 评分