generated fromuiwjs/react-monorepo-template
Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork1
Layout component for React. Handling the overall layout of a page.
License
NotificationsYou must be signed in to change notification settings
uiwjs/react-layout
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Handling the overall layout of a page.
⚠️ Note: Implemented with flex layout, please pay attention tobrowser 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
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;
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;
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;
The layout wrapper, in whichHeaderSiderContentFooter orLayout 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 inLayout.Sider: The sidebar with default style and basic functions, in which any element can be nested, and must be placed inLayout.Content: The content layout with the default style, in which any element can be nested, and must be placed inLayout.Footer: The bottom layout with the default style, in which any element can be nested, and must be placed inLayout.
| Property | Description | Type | Default |
|---|---|---|---|
| className | Container className | string | - |
| style | To customize the styles | CSSProperties | - |
| hasSider | hasSiderWhether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - |
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>>;
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>>;
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>>;
| 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>>;
As always, thanks to our amazing contributors!
Made withcontributors.
Licensed under the MIT License.
About
Layout component for React. Handling the overall layout of a page.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
No packages published
Contributors5
Uh oh!
There was an error while loading.Please reload this page.