zoukankan      html  css  js  c++  java
  • 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 }"

  • 相关阅读:
    宝贝,对不起
    转帖]四川人逆境中的幽默(整理)
    见闻大量急救车急速行驶有感
    5月16日当代第一IT诗人代腾飞17XIE在线访谈(转)
    陈风莲(帮别人名字作诗)
    愉快且卓有成效:培养你与人相处的能力
    夜半再次遭遇地震
    请允许我像亲人一样去爱你
    DiscoveryService.getRemoteAdvertisements是否会获得本地通告?
    windowClosed事件不响应
  • 原文地址:https://www.cnblogs.com/911sky/p/13852333.html
Copyright © 2011-2022 走看看