Vuetify附带了一个使用flex-box构建的12点栅格系统 用 用 由于默认是将屏幕横向分成12块 因此 在下面的案例中: chips翻译来是纸片 意即只能传递小段的消息 用color属性设置标签的颜色 用text-color属性设置标签内文字的颜色 在标签里可使用 当鼠标悬停在元素上时 可弹出一个提示 然后 用 效果: 卡片组件是一种多功能组件 可用于从面板到静态图像的任何东西 用 使用color属性设置卡片的颜色 使用img属性设置卡片的背景图片 使用raised使卡片阴影更深 使用flat移除卡片阴影效果 使用hover当鼠标悬停在卡片上时出现阴影效果 使用tile移除卡片圆角效果 用 用 头像默认是圆形的 可用tile使头像变成方形 使用color属性改变头像的背景颜色 使用size属性改变头像的尺寸
▲栅格系统
相当于将页面宽度平均分成了12等分 可以独立设置每个元素在页面的的宽度

在栅格系统的最外层是<v-container>标签 该标签能使里面的内容居中水平填充在页面上展示
<v-container>标签上添加fluid 可使其有更小的左右边距<v-row>标签包裹每一行的内容
例如justify="space-between"<v-col>标签包裹每一行中的每一块 里面放入内容
在<v-col>标签上 可以设置在不同大小的屏幕上 该块内容的所占比:

案例:
当屏幕处于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> ▲标签
用<v-chip>创建一个标签<v-chip>你好</v-chip>

<v-icon>标签添加图标<v-chip color="primary" text-color="black"> <v-avatar left> <v-icon>favorite</v-icon> </v-avatar> 你好 </v-chip>
<v-avatar>的边距

通过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>标签创建一个提示组件
<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>标签创建一个卡片
<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>标签内可以放置文本 图片 图标


<v-avatar size="100"> <img src="xxx.jpg"> </v-avatar>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)