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表单属性集合
随机推荐
- PyQt(Python+Qt)学习随笔:containers容器类部件QStackedWidget重要方法介绍
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 StackedWidget堆叠窗口部件为一系列窗口部件的堆叠,对应类为QStackedWidget. ...
- C#中SQL SERVER 2008字符数据类型使用心得
一.尽可能使用Varchar,少使用或者不使用Char字符类型 因为char类型输入的数据长度达不到设计长度,会用空格补足,下面是数据表设计图: 下面是编辑前200行的图: 凡是输入的数据长度达不到设 ...
- 学习一下 SpringCloud (一)-- 从单体架构到微服务架构、代码拆分(maven 聚合)
一.架构演变 1.系统架构.集群.分布式系统 简单理解 (1)什么是系统架构? [什么是系统架构?] 系统架构 描述了 在应用程序内部,如何根据 业务.技术.灵活性.可扩展性.可维护性 等因素,将系统 ...
- js中单引号和双引号区别
总结: 1.无论单引号还是双引号都是成双成对出现的,否则报错!浏览器在读到第一个双引号开始,第二个双引号结束,同样浏览器读取单引号也是第一个开始,第二个单引号结束,在使用的时候必须遵循规则那就是一对双 ...
- vue项目中增加打印功能
export default function printFile(html) { let userAgent = navigator.userAgent; if ( (userAgent.index ...
- mysql 列转行 动态写法
-- 列转行动态sql -- 测试表DROP TABLE IF EXISTS `tb_score`; CREATE TABLE `tb_score` ( `id` int(11) NOT NULL A ...
- tomcat-1-介绍篇
java语言分为三个体系: javase javaee,是javase的基础 一般就是指jdk javaee java的企业版本 其实是一套规范,就是用java语言做企业开发(目前看来就是开发一些动态 ...
- linux文件实时同步
参考博客:https://www.cnblogs.com/MacoLee/p/5633650.html 一.文件同步很简单 服务端:被动的接收传输过来的数据 客户端:主动提供数据给服务端 安装思路:服 ...
- Pytest学习(20)- allure之@allure.step()、allure.attach的详细使用
一.@allure.step的用法 可以理解为我们编写测试用例中的每一步操作步骤,而在allure中表示对每个测试用例进行非常详细的步骤说明 通过 @allure.step(),可以让测试用例在all ...
- 如何使用交易开拓者(TB)开发数字货币策略
更多精彩内容,欢迎关注公众号:数量技术宅.想要获取本期分享的完整策略代码,请加技术宅微信:sljsz01 为何使用交易开拓者(TB)作为回测工具 交易开拓者(后文以TB简称)是一个支持国内期货市场K线 ...