elementUI 學習- Layout布局 與UI 設定

Layout布局

1.創建布局

通過Col組件的:span屬性調整Layout布局，分為24欄。

el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>

　　

2.分欄間隔

通過Row組件的:gutter屬性來調整布局之間的寬度

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

　　

3.分欄漂移

通過Col組件的:offset屬性調整柵格的偏移位置（每次1格/24格）。

<el-row :gutter="20">
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

　　

4.對齊方式

通過Row組件的type="flex"啟動flex布局，再通過Row組件的justify屬性調整排版方式，屬性值分別有

start 居前（默認）
center 居中
end 居后
space-between 分布自適應（兩邊–中間，兩邊沒有空隙）
around （中間–兩邊，兩邊會有空隙）

<el-row type="flex" class="row-bg" justify="center">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

　　

5.響應式布局

參考bootstrap的響應式，預設四個尺寸

1. xs <768px
2. sm ≥768px
3. md ≥992
4. lg ≥1200

   <el-row :gutter="10">
     <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
     <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
     <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
     <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
   </el-row>
   

   　　

   ICON圖標

   今后可以使用<i>來做圖標，給其class添加el-icon-iconName即可。 
   可以在<button>上添加icon屬性。

   <i class="el-icon-edit"></i>
   <i class="el-icon-share"></i>
   <i class="el-icon-delete"></i>
   <el-button type="primary" icon="search">搜索</el-button>
   

   　　

   Button圖標

   1.主題風格

   1. default
   2. primary 藍色
   3. text 文字藍色無邊框

      <el-button>默認按鈕</el-button>
      <el-button type="primary">主要按鈕</el-button>
      <el-button type="text">文字按鈕</el-button>
      

      　　2.禁用狀態 
      通過修改:disabled的boolean值true,false來控制按鈕是否禁用。

      <el-button :plain="true" :disabled="true">主要按鈕</el-button>
      <el-button type="primary" :disabled="true">主要按鈕</el-button>
      <el-button type="text" :disabled="true">文字按鈕</el-button>
      

      　　

      3.顏色暗示

      1. 默認按鈕，通過type的值來控制
      2. 朴素按鈕，hover顯示顏色 ，通過plain的boolean值來控制

      4.圖標按鈕

      按鈕不添加字，設置icon屬性即可

   4. <el-button type="primary" icon="edit"></el-button>
      

      　　按鈕添加字，圖標居按鈕文字左側

      <el-button type="primary" icon="search">搜索</el-button>
      

      　　可以在<button>文字右側添加<i>標簽，圖標居按鈕文字右側

      <el-button type="primary">上傳
      <i class="el-icon-upload el-icon--right"></i>
      </el-button>
      

      　　

      5.加載中

      設置loading屬性為true即可

      <el-button type="primary" :loading="true">加載中</el-button>
      

      　　

      6.按鈕尺寸

      設置size屬性來配置

      • large 大
      • 正常
      • small 小
      • mini 超小 
        其他
      • autofocus：是否默認對焦，boolean
      • native-type：原生type，string（button,submit,reset）

      • Radio單選框(label前面到底加不加：冒號)

        1.基本用法

        v-model屬性用來綁定變量

        label用來賦值（想要選中該單選框，label的值必須等於v-model綁定的變量值，Number/String）

      • <template>
          <el-radio class="radio" v-model="radio" label="1">備選項</el-radio>
          <el-radio class="radio" v-model="radio" label="2">備選項</el-radio>
        </template>
         
        <script>
          export default {
            data () {
              return {
                radio: '1'
              };
            }
          }
        </script>
        

        　　

        2.禁用狀態

        設置disableed的boolean值為true

      • <template>
          <el-radio disabled v-model="radio1" label="禁用">備選項</el-radio>
          <el-radio disabled v-model="radio1" label="選中且禁用">備選項</el-radio>
        </template>
         
        <script>
          export default {
            data () {
              return {
                radio1: '選中且禁用'//此處變量值等於label變量值
              };
            }
          }
        </script>
        

        　　

        3.單選框組

        被<el-radio-group> </el-radio-group> 包含即可。

        只需要在<el-radio-group>中綁定v-model， 
        在<el-radio>中設置:label即可。 
        （提供可一個change方法響應變化，會傳入一個value值）

      • <template>
          <el-radio-group v-model="radio2">
            <el-radio :label="3">備選項</el-radio>
            <el-radio :label="6">備選項</el-radio>
            <el-radio :label="9">備選項</el-radio>
          </el-radio-group>
        </template>
         
        <script>
          export default {
            data () {
              return {
                radio2: 3
              };
            }
          }
        </script>
        

        　　

        4.按鈕組（單選）

        個人炒雞喜歡 
        lable就是顯示的值 
        在按鈕組當中添加<el-radio-button>就可以實現， 
        並且支持對size屬性設置large和small兩個屬性，不設置為默認。

      • <el-radio-group v-model="radio5" :disabled="true">
            <el-radio-button label="上海" :disabled="true">
            </el-radio-button>
            <el-radio-button label="北京"></el-radio-button>
            <el-radio-button label="廣州"></el-radio-button>
            <el-radio-button label="深圳"></el-radio-button>
          </el-radio-group>
        </template>
         
        <script>
          export default {
            data () {
              return {
                radio5: '上海'
              };
            }
          }
        </script>
        

        　　

        CheckBox單選框

        1.基礎用法 
        設置v-model屬性綁定變量。

      • <template>
          <!-- `checked` 為 true 或 false -->
          <el-checkbox v-model="checked">備選項</el-checkbox>
        </template>
        <script>
          export default {
            data() {
              return {
                checked: true
              };
            }
          };
        </script>
        

        　　

        • 2.禁用狀態 

        設置disabled屬性即可。

      • <el-checkbox v-model="checked2" disabled>備選項</el-checkbox>