Basic · Layout
Layout
Used to quickly divide the overall layout of the page
Overview
Layout: Layout containers. You can nestHeaderSiderContentFooterorLayoutitself inside.Header: Head component, can only be used insideLayout.Sider: Sidebar, can only be used insideLayout.Content: Content component, can only be used insideLayout.Footer: Footer component, can only be used insideLayout.
Notice
1、Layout components are implemented with Flex layout. Browser compatibility may need to be considered.
2、The Layout component will only help you implement the layout, but will not include styles such as background color, text color, width and height. You can pass in style according to your actual needs or write a separate css implementation given a specific className
2、The Layout component will only help you implement the layout, but will not include styles such as background color, text color, width and height. You can pass in style according to your actual needs or write a separate css implementation given a specific className
Demos
How to import
Three-section Layout
Left-sidebar Layout
Right-sidebar Layout
Sidebar Layout
Responsive Layout
Six response sizes are preset in the sidebar:
xs,sm,md,lg,xl,xxl. You can use breakpoint to set breakpoints, and use onBreakpoint to call callback functions.Layout Examples
Top-nav Layout
Top-Nav SideBar Layout
SideBar Navigation
API Reference
Layout
Layout.Header,Layout.Footer,Layout.Contentuse same API asLayout
| Properties | Instructions | type | Default |
|---|---|---|---|
| className | Class name | string | - |
| hasSider | Indicates that there is a Sider in the child element, which is generally not specified. It can be used to avoid style flashing during SSR. | boolean | - |
| style | Style | CSSProperties | - |
| aria-label | aria-label attribute, used to label the current element Description, improve accessibility | string | |
| role | role attribute to improve accessibility | string |
Layout.Sider
| Properties | Instructions | type | Default |
|---|---|---|---|
| breakpoint | Breakpoints that trigger responsive layout, one of 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' | String[] | - |
| className | Class name | string | - |
| style | Style | CSSProperties | - |
| onBreakpoint | Callback function when triggering a responsive layout breakpoint | (screen: string, broken: bool) => void | - |
| aria-label | aria-label attribute, used to label the current element Description, improve accessibility | string | |
| role | role attribute to improve accessibility | string |
responsive map
Accessibility
ARIA
- Sider can pass in aria-label props to describe the function of this Sider.
- Header Content Main Footer can pass in role aria-label to describe the function of the corresponding element.
Designed & Developed with love by Douyin FE & MED