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.
TIP
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
Example
Container API
Container Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| direction | layout direction for child elements | enum | vertical when nested with el-header or el-footer; horizontal otherwise |
Container Slots
| Name | Description | Subtags |
|---|---|---|
| default | customize default content | Container / Header / Aside / Main / Footer |
Header API
Header Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| height | height of the header | string | 60px |
Header Slots
| Name | Description |
|---|---|
| default | customize default content |
Aside API
Aside Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| width | width of the side section | string | 300px |
Aside Slots
| Name | Description |
|---|---|
| default | customize default content |
Main API
Main Slots
| Name | Description |
|---|---|
| default | customize default content |
Footer API
Footer Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| height | height of the footer | string | 60px |
Footer Slots
| Name | Description |
|---|---|
| default | customize default content |