);
}
export default Demo;
```
## Layout top-middle-bottom
```jsx mdx:preview
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 (
HeaderContent
);
}
export default Demo;
```
## Layout left-right
```jsx mdx:preview
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 (
SiderContent
);
}
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 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
```ts
import Layout, { LayoutHeader } from '@uiw/react-layout';
Layout.Header === LayoutHeader
```
```ts
import React from 'react';
export interface LayoutHeaderProps extends React.HTMLAttributes {
prefixCls?: string;
children?: React.ReactNode;
}
export declare const LayoutHeader: React.ForwardRefExoticComponent>;
```
## Content
```ts
import Layout, { LayoutContent } from '@uiw/react-layout';
Layout.Content === LayoutContent
```
```ts
import React from 'react';
export interface LayoutContentProps extends React.HTMLAttributes {
prefixCls?: string;
children?: React.ReactNode;
}
export declare const LayoutContent: React.ForwardRefExoticComponent>;
```
## Footer
```ts
import Layout, { LayoutFooter } from '@uiw/react-layout';
Layout.Footer === LayoutFooter
```
```ts
import React from 'react';
export interface LayoutFooterProps extends React.HTMLAttributes {
prefixCls?: string;
children?: React.ReactNode;
}
export declare const LayoutFooter: React.ForwardRefExoticComponent>;
```
## 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 |
```ts
import Layout, { LayoutSider } from '@uiw/react-layout';
Layout.Sider === LayoutSider
```
```ts
import React from 'react';
export declare function randomid(): string;
export interface LayoutSiderProps extends React.HTMLAttributes {
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>;
```
## Contributors
As always, thanks to our amazing contributors!
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
### License
Licensed under the MIT License.
---
_Source: https://npm.io/package/@uiw/react-layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
### License
Licensed under the MIT License.
---
_Source: https://npm.io/package/@uiw/react-layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._