^{Using my app is also a way to support me:}

---

Layout

Handling the overall layout of a page.

⚠️ Note: Implemented with flex layout, please pay attention to browser compatibility issues.

import{Layout}from'uiw';// orimportLayoutfrom'@uiw/react-layout';const{ Header, Footer, Sider, Content }=Layout;// orimportLayout,{LayoutHeader,LayoutContent,LayoutSider,LayoutFooter}from'@uiw/react-layout';Layout.Header===LayoutHeaderLayout.Content===LayoutContentLayout.Sider===LayoutSiderLayout.Footer===LayoutFooter

Basic Usage

importReactfrom'react';importReactDOMfrom'react-dom';importLayout,{LayoutHeader,LayoutContent,LayoutSider,LayoutFooter}from'@uiw/react-layout';const{ Header, Footer, Sider, Content }=Layout;conststylHeader={color: '#fff'}conststylSider={background: '#484a4e',color: '#fff',display: 'flex',justifyContent: 'center',alignItems: 'center'}conststylConten={background: '#108ee9',minHeight: 120,display: 'flex',justifyContent: 'center',alignItems: 'center',color: '#fff'}functionDemo(){const[collapsed,setCollapsed]=React.useState(false)return(<div><Layoutstyle={{marginBottom: 20}}><Headerstyle={stylHeader}>Header</Header><Layout><Siderstyle={stylSider}>Sider</Sider><Contentstyle={stylConten}>Content</Content></Layout><Footer>Footer</Footer></Layout><Layout><Headerstyle={stylHeader}>Header</Header><Layout><Contentstyle={stylConten}>Content</Content><Siderstyle={stylSider}>Sider</Sider></Layout><Footer>Footer</Footer></Layout><Layout><LayoutHeaderstyle={stylHeader}>Header</LayoutHeader><Layout><LayoutContentstyle={stylConten}>Content</LayoutContent><LayoutSiderstyle={stylSider}>Sider</LayoutSider></Layout><LayoutFooter>Footer</LayoutFooter></Layout></div>);}exportdefaultDemo;

Layout top-middle-bottom

importReactfrom'react';importReactDOMfrom'react-dom';importLayoutfrom'@uiw/react-layout';const{ Header, Footer, Sider, Content }=Layout;conststylHeader={color: '#fff'}conststylConten={background: '#108ee9',minHeight: 120,display: 'flex',justifyContent: 'center',alignItems: 'center',color: '#fff'}functionDemo(){const[collapsed,setCollapsed]=React.useState(false)return(<Layoutstyle={{marginBottom: 20}}><Headerstyle={stylHeader}>Header</Header><Contentstyle={stylConten}>Content</Content><Footer>Footer</Footer></Layout>);}exportdefaultDemo;

Layout left-right

importReactfrom'react';importReactDOMfrom'react-dom';importLayoutfrom'@uiw/react-layout';const{ Header, Footer, Sider, Content }=Layout;conststylHeader={color: '#fff'}conststylSider={background: '#484a4e',color: '#fff',display: 'flex',justifyContent: 'center',alignItems: 'center'}conststylConten={background: '#108ee9',minHeight: 120,display: 'flex',justifyContent: 'center',alignItems: 'center',color: '#fff'}functionDemo(){const[collapsed,setCollapsed]=React.useState(false)return(<Layoutstyle={{marginBottom: 20}}><Sidercollapsed={collapsed}style={stylSider}>Sider</Sider><Layout><Headerstyle={stylHeader}><buttononClick={()=>setCollapsed(!collapsed)}>{collapsed ? '>>' : '<<'}</button></Header><Contentstyle={stylConten}>Content</Content><Footer>Footer</Footer></Layout></Layout>);}exportdefaultDemo;

Layout

The layout wrapper, in which HeaderSiderContentFooter or Layout itself can be nested, and can be placed in any parent container.

• Header: The top layout with the default style, in which any element can be nested, and must be placed in Layout.
• Sider: The sidebar with default style and basic functions, in which any element can be nested, and must be placed in Layout.
• Content: The content layout with the default style, in which any element can be nested, and must be placed in Layout.
• Footer: The bottom layout with the default style, in which any element can be nested, and must be placed in Layout.

Property	Description	Type	Default
className	Container className	string	-
style	To customize the styles	CSSProperties	-
hasSider	hasSider Whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering	boolean	-

Header

importLayout,{LayoutHeader}from'@uiw/react-layout';Layout.Header===LayoutHeader

importReactfrom'react';exportinterfaceLayoutHeaderPropsextendsReact.HTMLAttributes<HTMLElement>{prefixCls?: string;children?: React.ReactNode;}exportdeclareconstLayoutHeader: React.ForwardRefExoticComponent<LayoutHeaderProps&React.RefAttributes<HTMLElement>>;

Content

importLayout,{LayoutContent}from'@uiw/react-layout';Layout.Content===LayoutContent

importReactfrom'react';exportinterfaceLayoutContentPropsextendsReact.HTMLAttributes<HTMLElement>{prefixCls?: string;children?: React.ReactNode;}exportdeclareconstLayoutContent: React.ForwardRefExoticComponent<LayoutContentProps&React.RefAttributes<HTMLElement>>;

Footer

importLayout,{LayoutFooter}from'@uiw/react-layout';Layout.Footer===LayoutFooter

importReactfrom'react';exportinterfaceLayoutFooterPropsextendsReact.HTMLAttributes<HTMLElement>{prefixCls?: string;children?: React.ReactNode;}exportdeclareconstLayoutFooter: React.ForwardRefExoticComponent<LayoutFooterProps&React.RefAttributes<HTMLElement>>;

Sider

Property	Description	Type	Default
className	Container className	string	-
style	To customize the styles	CSSProperties	-
collapsed	To set the current status	boolean	-
collapsedWidth	Width of the collapsed sidebar, by setting to 0 a special trigger will appear	boolean	80
width	Width of the sidebar	number/string	200

importLayout,{LayoutSider}from'@uiw/react-layout';Layout.Sider===LayoutSider

importReactfrom'react';exportdeclarefunctionrandomid(): string;exportinterfaceLayoutSiderPropsextendsReact.HTMLAttributes<HTMLElement>{prefixCls?: string;children?: React.ReactNode;/** Width of the sidebar */width?: number|string;/** Width of the collapsed sidebar, by setting to 0 a special trigger will appear */collapsedWidth?: number;/** To set the current status */collapsed?: boolean;}exportdeclareconstLayoutSider: React.ForwardRefExoticComponent<LayoutSiderProps&React.RefAttributes<HTMLDivElement>>;

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

Licensed under the MIT License.