The Layout component is used to create a basic layout structure with header, footer, sidebar and content areas. It provides customizable props such as headerHeight, asideWidth and tocWidth to adjust the size of each area. It also includes sub-components such as LayoutHeader, LayoutMain, LayoutSidebar, LayoutToc and LayoutFooter, which can be used independently for more flexibility. The component is responsive to different screen sizes with the help of useResponsive hook.
import { Layout } from '@lobehub/ui';| Name | Description | Type | Default |
|---|---|---|---|
| asideWidth | Width of the sidebar | number | -- |
| children | Children of the layout | ReactNode | -- |
| content | Content of the layout | ReactNode | -- |
| footer | Footer of the layout | ReactNode | -- |
| header | Header of the layout | ReactNode | -- |
| headerHeight | Height of the header | number | 64 |
| helmet | Helmet of the layout | ReactNode | -- |
| sidebar | Sidebar of the layout | ReactNode | -- |
| toc | Table of contents of the layout | ReactNode | -- |
| tocWidth | Width of the table of contents | number | -- |