Layout
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 === LayoutFooter
Basic Usage
import 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;
Layout top-middle-bottom
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;
Layout left-right
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;
Layout
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 | - |
Header
import Layout, { LayoutHeader } from '@uiw/react-layout';
Layout.Header === LayoutHeader
import 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>>;
Content
import Layout, { LayoutContent } from '@uiw/react-layout';
Layout.Content === LayoutContent
import 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>>;
Footer
import Layout, { LayoutFooter } from '@uiw/react-layout';
Layout.Footer === LayoutFooter
import 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>>;
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 |
import Layout, { LayoutSider } from '@uiw/react-layout';
Layout.Sider === LayoutSider
import 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>>;
Contributors
As always, thanks to our amazing contributors!
Made with github-action-contributors.
License
Licensed under the MIT License.