elementUI 學習入門之 layout 佈局

layout 佈局

　　經過基礎的 24 分欄，可進行快速佈局

　　基礎佈局

　　　　使用單一分欄建立基礎的柵格佈局, 經過 span 屬性指定每欄的大小

　　　　<el-col :span="8"></el-col>

1 <el-row>
2   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
3   <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
4   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
5 </el-row>

基礎分欄

　　分欄間隔

　　　　row 組件提供 gutter 屬性指定每欄之間的間隔，默認爲0

　　　　<el-row :gutter="10"></el-row>

　　混合佈局

　　　　根據指定 span 屬性值大小不一樣，每欄大小不同進行混合佈局

1 <el-row :gutter="20">
2   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
3   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
4   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
5   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
6 </el-row>

混合佈局

　　分欄偏移

　　　　經過指定 el-col 組件中 屬性 offset 的值對每欄進行偏移控制。eg：offset="6" ，使其向右偏移 6 欄大小

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

　　對齊方式

　　　　將 row 組件中的 type 屬性賦值爲 flex，並經過 justify 屬性指定 start、center、end、space-between、space-around 其中的值來定義子元素的排版

 1 <el-row type="flex" class="row-bg">
 2   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 3   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
 4   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 5 </el-row>
 6 <el-row type="flex" class="row-bg" justify="center">
 7   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 8   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
 9   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
10 </el-row>
11 <el-row type="flex" class="row-bg" justify="end">
12   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
13   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
14   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
15 </el-row>
16 <el-row type="flex" class="row-bg" justify="space-between">
17   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
18   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
19   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
20 </el-row>
21 <el-row type="flex" class="row-bg" justify="space-around">
22   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
23   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
24   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
25 </el-row>

對齊方式

　　　　樣式顯示爲：

　　　　

　　響應式佈局

　　　　參照 bootstrap 的響應式設計，預設了五個響應尺寸，xs、sm、md、lg、xl。當顯示大小 從最小到最大時，響應依次爲 xs、sm、md、lg、xl

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

響應式佈局

 

其中用到的樣式爲（不包括響應式佈局樣式）：

 1 <style>  2  .el-row {
 3  margin-bottom: 20px;
 4  &:last-child {  5  margin-bottom: 0;
 6     }
 7  }  8  .el-col {
 9  border-radius: 4px;
10   }
11  .bg-purple-dark {
12  background: #99a9bf;
13   }
14  .bg-purple {
15  background: #d3dce6;
16   }
17  .bg-purple-light {
18  background: #e5e9f2;
19   }
20  .grid-content {
21  border-radius: 4px;
22  min-height: 36px;
23   }
24  .row-bg {
25  padding: 10px 0;
26  background-color: #f9fafc;
27   }
28 </style>

樣式

 

詳細參數說明 ：