element-ui layout布局

element-ui layout布局
row指定一行
<el-row :gutter="20"></el-row>
1
col指定列、span 指定分栏
<el-col :span="6"> </el-col>
1
gutter指定分栏间隔
<el-row :gutter="20">
    <el-col :span="12"> </el-col>
    <el-col :span="12"> </el-col>
<el-row
1
2
3
4
offset属性指定分栏偏移的栏数（向右偏移）
<el-row :gutter="20">
  <el-col :span="6" :offset="6"><div></div></el-col>
  <el-col :span="6" :offset="6"><div></div></el-col>
</el-row>
1
2
3
4
type=’flex’指定对齐方式 
justify=center 居中对齐
justify=start 左对齐
justify=end 右对齐
justify=space-between 空格间距在中间对齐
justify=space-around 左右各占半格空格对齐
<el-row type="flex" justify="center">
  <el-col :span="6"><div></div></el-col>
  <el-col :span="6"><div></div></el-col>
  <el-col :span="6"><div></div></el-col>
</el-row>
1
2
3
4
5
响应式布局 
xs <768px 响应式栅格数或者栅格属性对象
sm ≥768px 响应式栅格数或者栅格属性对象
md ≥992 响应式栅格数或者栅格属性对象
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>
1
2
3
4
5
6
颜色
http://element.eleme.io/#/zh-CN/component/color
字体
http://element.eleme.io/#/zh-CN/component/typography
图标
http://element.eleme.io/#/zh-CN/component/icon
按钮
Button 组件默认提供7种主题，由type属性来定义，默认为default
默认按钮
<el-button></el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="text">文字按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="info">信息按钮</el-button>
1
2
3
4
5
6
7
朴素按钮
<el-button :plain="true" type="success">成功按钮</el-button>
<el-button :plain="true" type="warning">警告按钮</el-button>
<el-button :plain="true" type="danger">危险按钮</el-button>
<el-button :plain="true" type="info">信息按钮</el-button>
1
2
3
4
图标按钮(设置icon属性)
<el-button type="primary" icon="delete"></el-button>
1
禁用
<el-button type="primary" :disabled="true">主要按钮</el-button>
1
按钮组 标签来嵌套按钮
<el-button-group>
  <el-button type="primary" icon="arrow-left">上一页</el-button>
  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
1
2
3
4
加载中 :loading=”true”
<el-button type="primary" :loading="true">加载中</el-button>
1
不同尺寸, size可设置除正常按钮外的large、small、mini三种尺寸
<el-button type="primary" size="large">大型按钮</el-button>