English
Right Pane
test
Right Pane
);
export default Demo;
```
### 可用于布局
设置 `visiable={false}` 禁用拖拽栏，可用于布局。
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';
const Demo = () => (
Header
Sider
Content
Footer
Sider
Header
Content
Footer
);
export default Demo;
```
### 多栏分割
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';
const Demo = () => (
Left Pane
Center Pane
Center Pane
Right Pane
);
export default Demo;
```
### 线条拖拽
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';
const Demo = () => (
Left Pane
Center Pane
Center Pane
Right Pane
Left Pane
Center Pane
Right Pane
);
export default Demo;
```
### 垂直分割
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';
const Demo = () => (
Top Pane
Bottom Pane
);
export default Demo;
```
### 嵌套使用
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';
const Demo = () => (
Top Pane
Left Pane
Right Pane
Right Pane
);
export default Demo;
```
### 拖拽工具不显示
下面实例通过设置 `visiable` 的值来设置拖拽工具是否可见
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';
const Demo = () => (
Left Pane
Right Pane
Pane 1
Pane 2
Pane 3
Pane 4
Pane 5
);
export default Demo;
```
### 禁用拖拽
通过设置 `disable` 的值，禁用拖拽工具拖拽。
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';
const Demo = () => (
Left Pane
Top Pane
Bottom Pane
Right Pane
Pane 1
Pane 2
Pane 3
Pane 4
Pane 5
);
export default Demo;
```
### 抽屉
可拖拽左边栏宽度。
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';
import { Menu, Button } from 'uiw';
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
width: 210,
};
}
onClick() {
this.setState({
width: this.state.width === 0 ? 210 : 0,
});
}
render() {
const styl = { lineHeight: 0 };
if (this.state.width === 0) {
styl.width = `0%`;
} else {
styl.width = this.state.width;
}
return (
<>
{this.state.width === 0 ? '隐藏菜单' : '展示菜单'}
Right Pane
);
}
}
export default Demo;
```
### 支持自定义拖拽工具栏
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';
const Demo = () => (
{
return (
);
}}
style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}
>
test
Right Pane
);
export default Demo;
```
## Props
```ts
export interface SplitProps extends Omit, 'onDragEnd'> {
style?: React.CSSProperties;
className?: string;
prefixCls?: string;
/**
* 拖拽宽度/高度变化回调函数，宽度或者高度根据 mode 参数来确定
*/
onDragging?: (preSize: number, nextSize: number, paneNumber: number) => void;
/**
* 拖拽结束的回调函数
*/
onDragEnd?: (preSize: number, nextSize: number, paneNumber: number) => void;
/** 支持自定义拖拽工具栏 */
renderBar?: (props: React.HTMLAttributes) => JSX.Element;
/**
* 设置拖拽的工具条，为线条样式。
*/
lineBar?: boolean;
/**
* 设置拖拽的工具条，是否可见
*/
visiable?: boolean | number[];
/**
* 设置拖拽的工具条，禁用
*/
disable?: boolean | number[];
/**
* 类型，可选值为 `horizontal` 或 `vertical`
*/
mode?: 'horizontal' | 'vertical';
}
```
## Development
Runs the project in development mode.
```bash
# Step 1, run first, listen to the component compile and output the .js file
npm run watch
npm run build
# Step 2, development mode, listen to compile preview website instance
npm run doc
```
**production**
Builds the app for production to the build folder.
```bash
npm run released
```
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
## Contributors
As always, thanks to our amazing contributors!
Made with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).
### License
Licensed under the MIT License.
Made with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).
### License
Licensed under the MIT License.