vuetify 属性集合
1.v-form 组件具有 three 功能,可以通过在该组件上设置 ref 来访问它们。 ref 允许我们访问组件上的内部方法,例如 <v-form ref="form">。this.$refs.form.validate() 将验证所有输入并返回所有输入是否有效。 this.$refs.form.reset() 将清除所有输入并重置其验证错误。this.$refs.form.resetValidation() 将仅重置输入验证,而不会更改其状态。
2.<v-navigation-drawer> 导航抽屉
3.<v-overlay>遮罩层
4.打印属性类
.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex
5. col-x 例如:col-2表示两格
text-truncate 超出的省略号显示
6.display 对应的值
.d-{value} for xs
.d-{breakpoint}-{value} for sm, md, lg and xl
value属性可以为下列之一
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
7.display:none 和visibility:hidden同时可以起到隐藏的总用。
不同点:visibility:none依然占据空间
8.边距
{property}{direction}-{size} 例如:mx-2
property:
m- 用来设置外边距
p-用来设置内边距
direction:指定属性所应用的方向
t - 应用 margin-top 和 padding-top 的间距。
b - 应用 margin-bottom 和 padding-bottom 的间距。
l - 适用 margin-left 和 padding-left 的间距。
r - 应用 margin-right 和 padding-right 的间距。
s - 应用 margin-left/padding-left (LTR mode) 和 margin-right/padding-right (RTL mode)
e - 应用 margin-right/padding-right (LTR model) 和 margin-left/padding-left (RTL model)
x - 同时对应*-left和*-right属性
y - 同时对应*-top和*-bottom属性
a - 在所有方向应用该属性的间距。
size:
0 - 消除所有 margin 或者 padding 并设置为 0
1 - 设置 margin 或者 padding 到 4px
2 - 设置 margin 或者 padding 到 8px
3 - 设置 margin 或者 padding 到 12px
4 - 设置 margin 或者 padding 到 16px
5 - 设置 margin 或者 padding 到 20px
6 - 设置 margin 或者 padding 到 24px
7 - 设置 margin 或者 padding 到 28px
8 - 设置 margin 或者 padding 到 32px
9 - 设置 margin 或者 padding 到 36px
10 - 设置 margin 或者 padding 到 40px
11 - 设置 margin 或者 padding 到 44px
12 - 设置 margin 或者 padding 到 48px
n1 - 将负的 margin 设置到 4px
n2 - 将负的 margin 设置到 8px
n3 - 将负的 margin 设置到 12px
n4 - 将负的 margin 设置到 16px
n5 - 将负的 margin 设置到 20px
n6 - 将负的 margin 设置到 24px
n7 - 将负的 margin 设置到 28px
n8 - 将负的 margin 设置到 32px
n9 - 将负的 margin 设置到 36px
n10 - 将负的 margin 设置到 40px
n11 - 将负的 margin 设置到 44px
n12 - 将负的 margin 设置到 48px
auto - 设置边距为 auto
设置竖直水平居中:class="mx-auto my-auto px-auto"
9.purple 紫色
darken- 例如:darken-2
text-"value" 里面有 left center right bottom top
text--"颜色" 例如:text--white
10.elevation 海拔 0-24分25个级别
11.#pannel {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
在vuetify中可以定义为 d-flex flex-row
基本的类有:
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
12.v-ripple 波纹
<div
v-ripple
class="text-center elevation-2 pa-12 headline"
>
HTML element with v-ripple
</div>
(2) v-ripple="{ center: true }"
vuetify 属性集合的更多相关文章
- Spring中使用Map、Set、List、数组、属性集合的注入方法配置文件
(1)下边的一个Java类包含了所有Map.Set.List.数组.属性集合等这些容器,主要用于演示spring的注入配置: package com.lc.collection; import jav ...
- 【JVM虚拟机】(7)---深入理解Class中-属性集合
#[JVM虚拟机](7)---深入理解Class中-属性集合 之前有关class文件已经写了两篇博客: 1.[JVM虚拟机](5)---深入理解JVM-Class中常量池 2.[JVM虚拟机](6)- ...
- 属性集合java.util.Properties
属性集合java.util.Properties java.util.Properties集合 extends Hashtable<k, v> implements Map<k, v ...
- css3的3d属性集合
css3的3d属性集合 想进入css3的3d世界必须知道一下几个属性及其用法. 当然在进入属性介绍之前我想你必须知道3维坐标,附上一张经典图如下: 我想不用解释了吧.之后要平移和旋转都是在这个基础之上 ...
- Android GridView属性集合
GridView的一些特殊属性: 1.android:numColumns=”auto_fit” //GridView的列数设置为自动 2.android:columnWidth=”90dp &q ...
- UITableView 属性集合
UITableView-------表视图--继承UIScrollView并遵守NSCoding协议 属性 frame-------------设置控件的位置和大小 backgroundColor-- ...
- android之View组件的XML属性集合
XML属性 相关方法 说明 android:alpha setAlpha(float) 设置该组件的透明度 android:background setBackgroundResource(int) ...
- easyui 属性集合
easyUI属性汇总 属性分为CSS片段和JS片段. CSS类定义:1.div easyui-window 生成一个window窗口样式. 属性如下: 1)modal:是否生成模态窗口.true[是] ...
- HTML表单属性集合
随机推荐
- 第8.17节 Python __repr__方法和__str__方法、内置函数repr和str的异同点对比剖析
一. 引言 记得刚开始学习Python学习字符串相关内容的时候,查了很多资料,也做了些测试,对repr和str这两个函数的返回值老猿一直没有真正理解,因为测试发现这两个函数基本上输出时一样的.到现在老 ...
- 转:浅谈HTTP中Get、Post、Put与Delete的区别
1.GET请求会向数据库发索取数据的请求,从而来获取信息,该请求就像数据库的select操作一样,只是用来查询一下数据,不会修改.增加数据,不会影响资源的内容,即该请求不会产生副作用.无论进行多少次操 ...
- 乌云1000个PHP代码审计案例(1)
前两天发现的宝藏网站:https://php.mengsec.com/ 在github上面找到了源代码:https://github.com/Xyntax/1000php,可以在自己的服务器上面搭建 ...
- jQuery笔记(一)
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...
- pytorch实战(二)hw2——预测收入是否高于50000,分类问题
代码和ppt: https://github.com/Iallen520/lhy_DL_Hw 遇到的一些细节问题: 1. X_train文件不带后缀名csv,所以不是规范的csv文件,不能直接用pd. ...
- 百度前端技术学院-基础-day25-27
倒数开始 滴答滴 滴答滴 task1 题目: 我们现在来做一个最简单的时钟,通过小练习来学习 Date,复习定时,然后再练习一下函数的封装具体需求如下: 在页面中显示当前日期及时间,按秒更新 格式为 ...
- linux修改文件所属的用户组以及用户
linux修改文件所属的用户组以及用户 将文件夹从A用户(huangxf)目录复制B用户(zhenglf)目录,其中B没有sudo权限.将A的Downloads文件夹下的所有文件,复制到B的Docum ...
- 如何更简单的使用Polly
Polly 弹性瞬时错误处理库 Polly是一个C#实现的弹性瞬时错误处理库 它可以帮助我们做一些容错模式处理,比如: 超时与重试(Timeout and Retry) 熔断器(Circuit Bre ...
- 【Tomcat 源码系列】Tomcat 整体结构
一,前言 在开始看源码细节之前,首先要想好要看的问题.想好问题之后,我们该如何寻找要看的代码呢? 其实,这就好像去爬山的时候,突然想去上厕所,如果有一副地图,那么我们可以很快就找到厕所的位置.带着问题 ...
- 云原生时代,Java的危与机(周志明)
说明 本篇文章是转载自周志明老师的文章,链接地址:https://www.infoq.cn/article/RQfWw2R2ZpYQiOlc1WBE 今天,25 岁的 Java 仍然是最具有统治力的编 ...