Basic · Layout
Layout
Used to quickly divide the overall layout of the page

Overview

  • Layout: Layout containers. You can nest Header Sider Content Footer or Layout itself inside.
  • Header: Head component, can only be used inside Layout.
  • Sider: Sidebar, can only be used inside Layout.
  • Content: Content component, can only be used inside Layout.
  • Footer: Footer component, can only be used inside Layout.
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

Demos

How to import

Three-section 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

API Reference

Layout

Layout.Header, Layout.Footer, Layout.Content use same API as Layout
PropertiesInstructionstypeDefault
classNameClass namestring-
hasSiderIndicates 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-
styleStyleCSSProperties-
aria-labelaria-label attribute, used to label the current element Description, improve accessibilitystring
rolerole attribute to improve accessibilitystring

Layout.Sider

PropertiesInstructionstypeDefault
breakpointBreakpoints that trigger responsive layout, one of 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'String[]-
classNameClass namestring-
styleStyleCSSProperties-
onBreakpointCallback function when triggering a responsive layout breakpoint(screen: string, broken: bool) => void-
aria-labelaria-label attribute, used to label the current element Description, improve accessibilitystring
rolerole attribute to improve accessibilitystring

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.

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED