页面布局:
该布局组件为element自带布局组件的增强版本。所有页面的基础布局需要使用该布局方式。
一、通用布局容器
1.1 外层容器 <ap-container>
当子元素中包含 <ap-header> 或 <ap-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。
1.2 顶栏容器 <ap-header>
高度默认auto,可自定义高度:
<ap-header height="400px"/>
<ap-header height="50%"/>
1.2.1 顶栏表单式样:覆盖表单默认式样
<ap-header>
<el-form class="layout-header-form">
<el-form-item class="layout-header-form-item"><el-form-item>
<el-form>
<ap-header>
1.3 侧边容器 <ap-aside>
宽度默认300px,可自定义高度:
<ap-aside width="500px"/>
<ap-aside width="50%"/>
注:<ap-aside>子元素默认使用flex布局、垂直排列。
1.3.1 侧边容器常用布局方式
<ap-aside>
<div class="layout-aside-header">
<div class="layout-aside-header-title"> 标题 </div>
<div class="layout-aside-header-icon"> icon图表</div>
</div>
<div class="layout-aside-content">主要内容</div>
</ap-aside>
1.4 主要区域容器 <ap-main>
主要区域容器
1.5 底栏容器 <ap-footer>
高度默认60px,可自定义高度:
<ap-footer height="400px"/>
<ap-footer height="50%"/>
注意:
1. 以上组件采用了 flex 布局,使用前请确定目标浏览器是否兼容。
2. <ap-container> 的子元素只能是后四者,后四者的父元素也只能是 <ap-container>
3. 除了<ap-container> ,其他四个均支持margin参数。参数固定四位,每一位表示是否有margin。
如:margin="0111"从左到右,分别表示:margin-top:0px、margin-right:10px、margin-bottom:10px、margin-left:10px
二、常用布局
2.1 单个布局
{{ js1 }}
2.2 上下布局
{{ js2 }}
2.3 左右布局:
{{ js3 }}
2.4 左右布局
{{ js4 }}
2.5 上下主从布局
header内容
main:主内容
main:明细内容
{{ js5 }}
2.6 左右主从布局
header内容
main:主内容
main:明细内容
{{ js6 }}