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屬性調整排版方式，屬性值分別有

1. start 居前（默認）
2. center 居中
3. end 居後
4. space-between 分佈自適應（兩邊–中間，兩邊沒有空隙）
5. 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屬性即可

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

• 1

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>