https://github.com/uiwjs/react-split
A piece of view can be divided into areas where the width or height can be adjusted by dragging.
https://github.com/uiwjs/react-split
react react-components split typescript uiw
Last synced: 5 months ago
JSON representation
A piece of view can be divided into areas where the width or height can be adjusted by dragging.
- Host: GitHub
- URL: https://github.com/uiwjs/react-split
- Owner: uiwjs
- License: mit
- Created: 2020-04-15T06:41:43.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-12-21T10:50:58.000Z (about 1 year ago)
- Last Synced: 2025-08-20T10:53:42.627Z (5 months ago)
- Topics: react, react-components, split, typescript, uiw
- Language: TypeScript
- Homepage: https://uiwjs.github.io/react-split
- Size: 116 MB
- Stars: 78
- Watchers: 3
- Forks: 4
- Open Issues: 6
-
Metadata Files:
- Readme: README-zh.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Split 面板分割
[](https://jaywcjlove.github.io/#/sponsor)
[](https://www.npmjs.com/package/@uiw/react-split)
[](https://github.com/uiwjs/react-split/actions/workflows/ci.yml)
[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-split/file/README.md)
[](https://www.npmjs.com/package/@uiw/react-split)
[](https://uiwjs.github.io/react-split/coverage/lcov-report/)
[](https://gitpod.io/#https://github.com/uiwjs/react-split)
[](https://github.com/uiwjs/react-split/network/dependents)
可将一块内容，分割为可以拖拽调整宽度或高度的区域。
```jsx
import { Split } from 'uiw';
```
从组件库 `uiw` 中抽离出来的 `@uiw/react-split`，可以单独使用。
```jsx
import Split from '@uiw/react-split';
```
### 基础用法
> ~~通过设置子节点的 `minWidth` 样式，即可设置拖拽最小宽度值。通过设置子节点样式 `flexBasis` 样式即可设置默认分割内容的占比宽度。~~
- 固定初始宽度或者高度，可通过设置子节点，样式 `width: '80%'` 宽度百分百来计算。
- 拖拽至最小宽度，可通过设置子节点样式 `minWidth: 30`，来达到效果
- 默认情况下，不设置样式 `width`，需要将某个子节点样式设为 `flex: 1`，来自适应
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';
const Demo = () => (
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.