Handling the overall layout of a page.
⚠️ Note: Implemented with flex layout, please pay attention to browser compatibility issues.
import { Layout } from 'uiw'; // or import Layout from '@uiw/react-layout'; const { Header, Footer, Sider, Content } = Layout; // or import Layout, { LayoutHeader, LayoutContent, LayoutSider, LayoutFooter } from '@uiw/react-layout'; Layout.Header === LayoutHeader Layout.Content === LayoutContent Layout.Sider === LayoutSider Layout.Footer === LayoutFooterimport React from 'react'; import ReactDOM from 'react-dom'; import Layout, { LayoutHeader, LayoutContent, LayoutSider, LayoutFooter } from '@uiw/react-layout'; const { Header, Footer, Sider, Content } = Layout; const stylHeader = { color: '#fff' } const stylSider = { background: '#484a4e', color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center' } const stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } function Demo() { const [collapsed, setCollapsed] = React.useState(false) return ( <div> <Layout style={{ marginBottom: 20 }}> <Header style={stylHeader}>Header</Header> <Layout> <Sider style={stylSider}>Sider</Sider> <Content style={stylConten}>Content</Content> </Layout> <Footer>Footer</Footer> </Layout> <Layout> <Header style={stylHeader}>Header</Header> <Layout> <Content style={stylConten}>Content</Content> <Sider style={stylSider}>Sider</Sider> </Layout> <Footer>Footer</Footer> </Layout> <Layout> <LayoutHeader style={stylHeader}>Header</LayoutHeader> <Layout> <LayoutContent style={stylConten}>Content</LayoutContent> <LayoutSider style={stylSider}>Sider</LayoutSider> </Layout> <LayoutFooter>Footer</LayoutFooter> </Layout> </div> ); } export default Demo;import React from 'react'; import ReactDOM from 'react-dom'; import Layout from '@uiw/react-layout'; const { Header, Footer, Sider, Content } = Layout; const stylHeader = { color: '#fff' } const stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } function Demo() { const [collapsed, setCollapsed] = React.useState(false) return ( <Layout style={{ marginBottom: 20 }}> <Header style={stylHeader}>Header</Header> <Content style={stylConten}>Content</Content> <Footer>Footer</Footer> </Layout> ); } export default Demo;import React from 'react'; import ReactDOM from 'react-dom'; import Layout from '@uiw/react-layout'; const { Header, Footer, Sider, Content } = Layout; const stylHeader = { color: '#fff' } const stylSider = { background: '#484a4e', color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center' } const stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } function Demo() { const [collapsed, setCollapsed] = React.useState(false) return ( <Layout style={{ marginBottom: 20 }}> <Sider collapsed={collapsed} style={stylSider}>Sider</Sider> <Layout> <Header style={stylHeader}> <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? '>>' : '<<'}</button> </Header> <Content style={stylConten}>Content</Content> <Footer>Footer</Footer> </Layout> </Layout> ); } export default Demo;The layout wrapper, in which Header Sider Content Footer 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 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 | hasSider Whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - |
import Layout, { LayoutHeader } from '@uiw/react-layout'; Layout.Header === LayoutHeaderimport React from 'react'; export interface LayoutHeaderProps extends React.HTMLAttributes<HTMLElement> { prefixCls?: string; children?: React.ReactNode; } export declare const LayoutHeader: React.ForwardRefExoticComponent<LayoutHeaderProps & React.RefAttributes<HTMLElement>>;import Layout, { LayoutContent } from '@uiw/react-layout'; Layout.Content === LayoutContentimport React from 'react'; export interface LayoutContentProps extends React.HTMLAttributes<HTMLElement> { prefixCls?: string; children?: React.ReactNode; } export declare const LayoutContent: React.ForwardRefExoticComponent<LayoutContentProps & React.RefAttributes<HTMLElement>>;import Layout, { LayoutFooter } from '@uiw/react-layout'; Layout.Footer === LayoutFooterimport React from 'react'; export interface LayoutFooterProps extends React.HTMLAttributes<HTMLElement> { prefixCls?: string; children?: React.ReactNode; } export declare const LayoutFooter: 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 |
import Layout, { LayoutSider } from '@uiw/react-layout'; Layout.Sider === LayoutSiderimport React from 'react'; export declare function randomid(): string; export interface LayoutSiderProps extends React.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; } export declare const LayoutSider: React.ForwardRefExoticComponent<LayoutSiderProps & React.RefAttributes<HTMLDivElement>>;As always, thanks to our amazing contributors!
Made with contributors.
Licensed under the MIT License.