Container 布局容器
用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外， <el-container>的直接子元素必须是后四个组件中的一个或多个。后四个组件的父元素必须是一个 <el-container>
常见页面布局
export function ContainerHeaderMain() { return ( <ElContainer> <ElHeader style={headerStyle}>Header</ElHeader> <ElMain style={mainStyle}>Main</ElMain> </ElContainer> );}
export function ContainerBasic() { return ( <ElContainer> <ElHeader style={headerStyle}>Header</ElHeader> <ElMain style={mainStyle}>Main</ElMain> <ElFooter style={footerStyle}>Footer</ElFooter> </ElContainer> );}
export function ContainerAsideMain() { return ( <ElContainer> <ElAside width="200px" style={asideStyle}>Aside</ElAside> <ElMain style={mainStyle}>Main</ElMain> <ElAside width="200px" style={asideStyle}>Aside</ElAside> </ElContainer> );}
export function ContainerAside() { return ( <ElContainer> <ElAside width="200px" style={asideStyle}>Aside</ElAside> <ElContainer> <ElHeader style={headerStyle}>Header</ElHeader> <ElMain style={mainStyle}>Main</ElMain> </ElContainer> </ElContainer> );}
export function ContainerAsideWithFooter() { return ( <ElContainer> <ElAside width="200px" style={asideStyle}>Aside</ElAside> <ElContainer> <ElHeader style={headerStyle}>Header</ElHeader> <ElMain style={mainStyle}>Main</ElMain> <ElFooter style={footerStyle}>Footer</ElFooter> </ElContainer> </ElContainer> );}
export function ContainerHeaderAside() { return ( <ElContainer> <ElHeader style={headerStyle}>Header</ElHeader> <ElContainer> <ElAside width="200px" style={asideStyle}>Aside</ElAside> <ElMain style={mainStyle}>Main</ElMain> </ElContainer> </ElContainer> );}
export function ContainerNested() { return ( <ElContainer> <ElHeader style={headerStyle}>Header</ElHeader> <ElContainer> <ElAside width="200px" style={asideStyle}>Aside</ElAside> <ElContainer> <ElMain style={mainStyle}>Main</ElMain> <ElFooter style={footerStyle}>Footer</ElFooter> </ElContainer> </ElContainer> </ElContainer> );}
例子
export function ContainerExample() { return ( <ElContainer className={styles.layoutDemo} style={{ height: 500 }}> <ElAside width="200px"> <ElScrollbar> <ElMenu defaultOpeneds={["1", "3"]}> <ElSubMenu index="1" title={ <> <ElIcon> <Message /> </ElIcon> Navigator One </> } > <ElMenuItemGroup title="Group 1"> <ElMenuItem index="1-1">Option 1</ElMenuItem> <ElMenuItem index="1-2">Option 2</ElMenuItem> </ElMenuItemGroup> <ElMenuItemGroup title="Group 2"> <ElMenuItem index="1-3">Option 3</ElMenuItem> </ElMenuItemGroup> <ElSubMenu index="1-4" title="Option4"> <ElMenuItem index="1-4-1">Option 4-1</ElMenuItem> </ElSubMenu> </ElSubMenu> <ElSubMenu index="2" title={ <> <ElIcon> <Menu /> </ElIcon> Navigator Two </> } > <ElMenuItemGroup title="Group 1"> <ElMenuItem index="2-1">Option 1</ElMenuItem> <ElMenuItem index="2-2">Option 2</ElMenuItem> </ElMenuItemGroup> <ElMenuItemGroup title="Group 2"> <ElMenuItem index="2-3">Option 3</ElMenuItem> </ElMenuItemGroup> <ElSubMenu index="2-4" title="Option 4"> <ElMenuItem index="2-4-1">Option 4-1</ElMenuItem> </ElSubMenu> </ElSubMenu> <ElSubMenu index="3" title={ <> <ElIcon> <Setting /> </ElIcon> Navigator Three </> } > <ElMenuItemGroup title="Group 1"> <ElMenuItem index="3-1">Option 1</ElMenuItem> <ElMenuItem index="3-2">Option 2</ElMenuItem> </ElMenuItemGroup> <ElMenuItemGroup title="Group 2"> <ElMenuItem index="3-3">Option 3</ElMenuItem> </ElMenuItemGroup> <ElSubMenu index="3-4" title="Option 4"> <ElMenuItem index="3-4-1">Option 4-1</ElMenuItem> </ElSubMenu> </ElSubMenu> </ElMenu> </ElScrollbar> </ElAside> <ElContainer> <ElHeader style={{ textAlign: "right", fontSize: 12 }}> <div className={styles.toolbar}> <ElDropdown menu={ <ElDropdownMenu> <ElDropdownItem command="view">View</ElDropdownItem> <ElDropdownItem command="add">Add</ElDropdownItem> <ElDropdownItem command="delete">Delete</ElDropdownItem> </ElDropdownMenu> } > <span style={{ display: "inline-flex", alignItems: "center" }}> <ElIcon style={{ marginRight: 8, marginTop: 1 }}> <Setting /> </ElIcon> </span> </ElDropdown> <span>Tom</span> </div> </ElHeader> <ElMain> <ElScrollbar> <ElTable data={tableData}> <ElTableColumn prop="date" label="Date" width={140} /> <ElTableColumn prop="name" label="Name" width={120} /> <ElTableColumn prop="address" label="Address" /> </ElTable> </ElScrollbar> </ElMain> </ElContainer> </ElContainer> );}
Container API
Container Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|
| direction | 布局方向。不传时根据是否含 Aside 自动判断 | enum | — |
| className / style | 根节点类名与样式 | string / CSSProperties | — |
Container Events
无。
Container Slots
| 插槽名 | 说明 | React 写法 |
|---|
| default | 容器内容 | children |
| 属性名 | 说明 | 类型 | 默认值 |
|---|
| height | 顶栏高度 | string | 60px |
| className / style | 根节点类名与样式 | string / CSSProperties | — |
Aside Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|
| width | 侧边栏宽度 | string | 300px |
| className / style | 根节点类名与样式 | string / CSSProperties | — |
Main Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|
| className / style | 根节点类名与样式 | string / CSSProperties | — |
| 属性名 | 说明 | 类型 | 默认值 |
|---|
| height | 底栏高度 | string | 60px |
| className / style | 根节点类名与样式 | string / CSSProperties | — |
Slots
Header / Aside / Main / Footer 均只有默认插槽，React 侧对应 children。
Exposes
无。
