3.1 KiB
title, lang
| title | lang |
|---|---|
| Container | en-US |
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
<style lang="scss"> @use '../../examples/container/common-layout.scss'; </style>:::demo
container/layout-hm
:::
:::demo
container/layout-hmf
:::
:::demo
container/layout-am
:::
:::demo
container/layout-ham
:::
:::demo
container/layout-hamf
:::
:::demo
container/layout-ahm
:::
:::demo
container/layout-ahmf
:::
Example
:::demo
container/example
:::
Container API
Container Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| direction | layout direction for child elements | ^[enum]'horizontal' | 'vertical' |
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 |