布局容器
用于布局的容器组件，方便快速搭建页面的基本结构
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
提示
这些组件使用了 flex 布局，请确保您的浏览器支持该特性。 此外，<el-container> 的直接子元素必须是后四个组件中的一个或多个。 并且后四个组件的父元素也必须是 <el-container>。
常见布局
样例
Container API
Container 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| direction | 子元素的排列方向 | 枚举 | 当子元素中有 el-header 或 el-footer 时为 vertical，否则为 horizontal |
Container 插槽
| 名称 | 描述 | 子标签 |
|---|---|---|
| default | 自定义默认内容 | 容器 / 顶栏 / 侧边栏 / 主要区域 / 底栏 |
Header API
Header 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| 高度 | 顶栏高度 | string | 60px |
Header 插槽
| 名称 | 描述 |
|---|---|
| default | 自定义默认内容 |
Aside API
Aside 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| width | 侧边栏宽度 | string | 300px |
Aside 插槽
| 名称 | 描述 |
|---|---|
| default | 自定义默认内容 |
Main API
Main 插槽
| 名称 | 描述 |
|---|---|
| default | 自定义默认内容 |
Footer API
Footer 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| 高度 | 底栏高度 | string | 60px |
Footer 插槽
| 名称 | 描述 |
|---|---|
| default | 自定义默认内容 |
来源
贡献者
