Container 布局容器

基础用法

el-container：外层容器。当子元素中有 el-header 或 el-footer时，全部子元素会垂直上下排列，否则会水平左右排列。

el-header：顶栏容器。

el-aside：侧边栏容器。

el-main：主要区域容器。

el-footer：底栏容器。

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</el-container>

el-container属性：

参数

类型

说明

可选值

默认值

direction

子元素的排列方向

string

horizontal / vertical

子元素中有 el-header 或 el-footer 时为 vertical，否则为 horizontal

el-header属性：

参数

类型

说明

可选值

默认值

height

顶栏高度

string

—

60px

el-aside 属性：

参数

类型

说明

可选值

默认值

width

侧边栏宽度

string

—

300px

el-footer属性：

参数

类型

说明

可选值

默认值

height

底栏高度

string

—

60px

 

1.创建布局

通过Col组件的:span属性调整Layout布局，分为24栏。

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

参数

类型

说明

可选值

默认值

gutter

栅格间隔

number

—

0

type

布局模式，可选 flex，现代浏览器下有效

string

—

—

justify

flex 布局下的水平排列方式

string

start/end/center/space-around/space-between

start

align

flex 布局下的垂直排列方式

string

top/middle/bottom

top

tag

自定义元素标签

string

*

div

el-col 属性：

参数

类型

说明

可选值

默认值

span

栅格占据的列数

number

—

24

offset

栅格左侧的间隔格数

number

—

0

push

栅格向右移动格数

number

—

0

pull

栅格向左移动格数

number

—

0

xs

<768px 响应式栅格数或者栅格属性对象

number/object (例如： {span: 4, offset: 4})

—

—

sm

≥768px 响应式栅格数或者栅格属性对象

number/object (例如： {span: 4, offset: 4})

—

—

md

≥992px 响应式栅格数或者栅格属性对象

number/object (例如： {span: 4, offset: 4})

—

—

lg

≥1200px 响应式栅格数或者栅格属性对象

number/object (例如： {span: 4, offset: 4})

—

—

xl

≥1920px 响应式栅格数或者栅格属性对象

number/object (例如： {span: 4, offset: 4})

—

—

tag

自定义元素标签

string

*

div

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>