Vuetify2.x学习笔记(叁)：栅格系统(grid)、标签(chips)、提示语(tooltip)、卡片(cards)、头像(avatar)前端"✧treasure mountain✧"-

▲栅格系统

Vuetify附带了一个使用flex-box构建的12点栅格系统
相当于将页面宽度平均分成了12等分 可以独立设置每个元素在页面的的宽度

在栅格系统的最外层是<v-container>标签 该标签能使里面的内容居中水平填充在页面上展示

• 在<v-container>标签上添加fluid 可使其有更小的左右边距

用<v-row>标签包裹每一行的内容

• 使用justify属性设置对齐方式 该属性即为即css的justify-content属性 属性值也是一样的
  例如justify="space-between"

用<v-col>标签包裹每一行中的每一块 里面放入内容
在<v-col>标签上 可以设置在不同大小的屏幕上 该块内容的所占比：

• 用cols属性设置设置组件扩展的默认列数 即xs屏幕大小下的该块内容所占大小 可选值有1-12和auto
• 用sm md lg xl这四个属性设置当处于该屏幕大小时 该块内容所占大小
  

案例：

由于默认是将屏幕横向分成12块 因此 在下面的案例中：
当屏幕处于md大小时 第一个按钮占一半 二三四按钮加起来占半行
当屏幕处于sm大小时 第一个按钮占一整行 二三四按钮加起来占一行
如此 即可实现在不同屏幕大小下不同的页面布局

<v-container> <v-row> <v-col cols="12" md="6" sm="12"> <v-btn block class="primary">第一个按钮</v-btn> </v-col> <v-col cols="12" md="2" sm="4" > <v-btn block class="primary">第二个按钮</v-btn> </v-col> <v-col cols="12" md="2" sm="4"> <v-btn block class="primary">第三个按钮</v-btn> </v-col> <v-col cols="12" md="2" sm="4"> <v-btn block class="primary">第四个按钮</v-btn> </v-col> </v-row> </v-container> 

▲标签

chips翻译来是纸片 意即只能传递小段的消息
用<v-chip>创建一个标签

<v-chip>你好</v-chip> 

• 用color属性设置标签的颜色

• 用text-color属性设置标签内文字的颜色
  

• 在标签里可使用<v-icon>标签添加图标

<v-chip color="primary" text-color="black"> <v-avatar left> <v-icon>favorite</v-icon> </v-avatar>   你好 </v-chip> 

• 添加outlined 可使标签只有边框颜色
• 添加disabled 可禁用该标签
• 添加pill 可移除标签内的<v-avatar>的边距
• 添加x-small small large x-large 可设置标签的尺寸
• 添加draggable 使标签可被拖动
• 添加close 使标签可被关闭(标签上会出现一个叉叉)
  
  通过JS控制标签的显示：

<v-chip color="primary" text-color="black" close v-if="isShowChip" @click:close="isShowChip=false"> <v-avatar left> <v-icon>favorite</v-icon> </v-avatar>  你好 </v-chip>  ...  <script> export default { data() { return {       isShowChip:true } } } </script> 

▲提示语

当鼠标悬停在元素上时 可弹出一个提示

用<v-tooltip>标签创建一个提示组件

• 用color属性可修改提示的颜色
• 用top bottom left right可修改提示的位置(上下左右)

然后 用<template v-slot:activator="{ on }">包裹要用于触发提示的元素 无论是按钮 是图标 是文字都可触发提示
最后 给要触发提示的元素上添加v-on="on"即可

<v-tooltip bottom> <template v-slot:activator="{ on }"> <v-btn color="primary" dark v-on="on">按钮</v-btn> </template> <span>点击按钮将会发生...</span> </v-tooltip> 

效果：

▲卡片

卡片组件是一种多功能组件 可用于从面板到静态图像的任何东西

用<v-card>标签创建一个卡片

• 使用color属性设置卡片的颜色

• 使用img属性设置卡片的背景图片

• 使用raised使卡片阴影更深

• 使用flat移除卡片阴影效果

• 使用hover当鼠标悬停在卡片上时出现阴影效果

• 使用tile移除卡片圆角效果

用<v-card-title>标签在卡片中添加标题
用<v-card-text>标签在卡片中添加文字内容
用<v-card-actions>标签在卡片中添加行为

<v-card outlined class="text-xs-center ma-3"> <v-card-title>标题</v-card-title> <v-card-text> <div class="subheading">Mike</div> <div class="grey--text">前端工程师</div> </v-card-text> <v-card-actions> <v-btn outlined color="grey"> <v-icon small left>message</v-icon> <span>发送消息</span> </v-btn> </v-card-actions> </v-card> 

▲头像

用<v-avatar>标签创建一个头像组件
<v-avatar>标签内可以放置文本 图片 图标

• 头像默认是圆形的 可用tile使头像变成方形
  

• 使用color属性改变头像的背景颜色
  

• 使用size属性改变头像的尺寸

<v-avatar size="100"> <img src="xxx.jpg"> </v-avatar>