Container
Container components for scaffolding basic structure of the page:
<el-container>: wrapper container. When nested with a <el-header> or <el-footer>, all its child elements will be vertically arranged. Otherwise horizontally.
<el-header>: container for headers.
<el-aside>: container for side sections (usually a side nav).
<el-main>: container for main sections.
<el-footer>: container for footers.
These components use flex for layout, so please make sure your browser supports it. Besides, <el-container>'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a <el-container>.
Common layouts
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> ); } Example
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
Name Description Type Default direction layout direction for child elements enumvertical when nested with el-header or el-footer; horizontal otherwise
Container Slots
Name Description Subtags default customize default content Container / Header / Aside / Main / Footer
Name Description Type Default height height of the header string60px
Name Description default customize default content
Aside API
Aside Attributes
Name Description Type Default width width of the side section string300px
Aside Slots
Name Description default customize default content
Main API
Main Slots
Name Description default customize default content
Name Description Type Default height height of the footer string60px
Name Description default customize default content
