🌏 Translated with the assistance of DeepSeek and ChatGPT
Layout Container
You can use it to build the basic structure of a page—amazing, almost like magic! It includes the following parts:
- Container: The outer container;
- Header: The header area;
- Footer: The footer area;
- Main: The main content area;
- Aside: The sidebar area.
Common Page Layouts
Hide source code
Hide source code
Hide source code
Hide source code
Layout Borders
Header, Footer, and Aside can display borders using the bordered property. The Aside component's side property is used to indicate the sidebar position, which changes where the border appears.
Hide source code
Emphasized Layout
Header, Footer, and Aside can enable dark mode using the dark property.
Hide source code
Soft Background
The soft property can be used on Main to display a soft light gray background.
Hide source code
API
ContainerProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| direction | 'horizontal' | 'vertical' | True | | The direction in which child elements are arranged. If there is an Aside child component, the default is 'vertical', otherwise 'horizontal'. | 0.0.0-beta |
ContainerSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| default | | Used to pass in child layout container components. | 0.0.0-beta |
MainProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| soft | boolean | True | false | Soft light gray background. | 0.0.3 |
MainSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| default | | Content of the main area. | 0.0.0-beta |
HeaderProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| minHeight | string | number | True | 64 | Minimum height of the Header component. | 0.0.0-beta |
| bordered | boolean | True | false | Whether the Header component displays a border. | 0.0.0-beta |
| dark | boolean | True | false | Whether the Header component uses dark mode. | 0.0.0-beta |
HeaderSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| default | | Content of the header area. | 0.0.0-beta |
FooterProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| minHeight | string | number | True | 64 | Minimum height of the Footer component. | 0.0.0-beta |
| bordered | boolean | True | false | Whether the Footer component displays a border. | 0.0.0-beta |
| dark | boolean | True | false | Whether the Footer component uses dark mode. | 0.0.0-beta |
FooterSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| default | | Content of the footer area. | 0.0.0-beta |
AsideProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| width | string | number | True | 300 | Width of the Aside component. | 0.0.0-beta |
| bordered | boolean | True | false | Whether the Aside component displays a border. | 0.0.0-beta |
| side | 'left' | 'right' | True | 'left' | Property used to indicate the sidebar position, which changes where the border appears. If set to 'left', the border appears on the right; if set to 'right', the border appears on the left. | 0.0.0-beta |
| dark | boolean | True | false | Whether the Aside component uses dark mode. | 0.0.0-beta |
AsideSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| default | | Content of the sidebar area. | 0.0.0-beta |