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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM