▲栅格系统
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>
