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 {
  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 }"

原文地址:https://www.cnblogs.com/911sky/p/13852333.html