Layout布局
通过24分栏,迅速简便的创建布局
格式:
<el-row >
<el-col :span="">...</el-col>
</el-row>
Row Attributes
gutter | 栅格间隔 | :gutter="number" | 默认为0 |
type | 布局模式,可选flex,可通过justify来定义子元素排版方式 | type="flex" | |
justify | flex布局下的水平排列方式 | justift="start|end|center|space-around|space-between | 默认start |
align | flex布局下的垂直排列方式 | align="top|midlle|bottom | 默认top |
tag | 自定义元素标签 | 默认div |
Col Attributes
span | 栅格占列数 | :span="number" | 默认24(最大值) |
offset | 栅格左侧偏移的栏数 | :offset="number" | 默认0 |
push | 栅格向右移动的格数 | :push="number" | 默认0 |
pull | 栅格向左移动的格数 | :pull="number" | 默认0 |
xs|sm|md|lg|xl | |||
tag | 自定义元素标签 | 默认div |
Container布局容器
格式:
<el-container> //外层容器
<el-header></el-header> //顶栏容器
<el-aside></el-aside> //侧边栏容器
<el-main></el-main> //主要区域容器
<el-footer></el-footer> //底栏容器
</el-container>
必须被外层容器包裹,子元素与<el-header>和<el-footer>垂直分布,其他都水平分布
Container Attributes
direction | 子元素的排列方向 | direction="vertical|horizontal" | 子元素中有<el-header>或<el-footer>为vertical,否则为horizontal |
Header Attributes
height | 顶栏高度 | height="number px" | 默认60px |
Aside Attributes
width | 侧边栏宽度 | width="number px" | 默认300px |
Footer Attributes
height | 底栏高度 | height="number px | 默认60px |