Split 面板分割
===

[![Build & Deploy](https://github.com/uiwjs/react-split/workflows/Build%20&%20Deploy/badge.svg)](https://github.com/uiwjs/react-split/actions)
[![Issues](https://img.shields.io/github/issues/uiwjs/react-split.svg)](https://github.com/uiwjs/react-split/issues)
[![Forks](https://img.shields.io/github/forks/uiwjs/react-split.svg)](https://github.com/uiwjs/react-split/network)
[![Stars](https://img.shields.io/github/stars/uiwjs/react-split.svg)](https://github.com/uiwjs/react-split/stargazers)
[![Release](https://img.shields.io/github/release/uiwjs/react-split)](https://github.com/uiwjs/react-split/releases)
[![npm version](https://img.shields.io/npm/v/@uiw/react-split.svg)](https://www.npmjs.com/package/@uiw/react-split)
[![open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-split/file/README.md)

可将一块内容，分割为可以拖拽调整宽度或高度的区域。

```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`，来自适应

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
import Split from '@uiw/react-split';

const Demo = () => (
  <div>
    <Split style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>
      <div style={{ width: '20%', minWidth: 30 }}>
        <iframe
          srcDoc="<div>test</div>"
          style={{ width: '100%', height: '100%' }}
          title="Code Preview"
          sandbox="allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts"
        />
      </div>
      <div style={{ width: '80%', minWidth: 100 }}>
        Right Pane
      </div>
    </Split>
    <Split
      style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}
    >
      <div style={{ minWidth: 60 }}>
        test
      </div>
      <div  style={{ minWidth: 80, flex: 1 }}>
        Right Pane
      </div>
    </Split>
  </div>
);
ReactDOM.render(<Demo />, _mount_);
```

### 可用于布局

设置 `visiable={false}` 禁用拖拽栏，可用于布局。

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
import Split from '@uiw/react-split';

const Demo = () => (
  <div>
    <Split mode="vertical" visiable={false}>
      <div style={{ minHeight: 45, background: '#dcdcdc' }}>
        Header
      </div>
      <Split visiable={false}>
        <div style={{ minWidth: 200, maxWidth: 200, minHeight: 120, background: '#b5b5b5' }}>
          Sider
        </div>
        <div style={{ width: '100%', background: '#ececec' }}>
          Content
        </div>
      </Split>
      <div style={{ minHeight: 45, background: '#dcdcdc' }}>
        Footer
      </div>
    </Split>
    <div style={{ height: 20 }}></div>
    <Split visiable={false}>
      <div style={{ minWidth: 200, maxWidth: 200, minHeight: 85, background: '#a9a9a9' }}>
        Sider
      </div>
      <Split mode="vertical" visiable={false} style={{ width: '100%' }}>
        <div style={{ minHeight: 45, background: '#dcdcdc' }}>
          Header
        </div>
        <div style={{ minHeight: 85, background: '#b5b5b5' }}>
          Content
        </div>
        <div style={{ minHeight: 45, background: '#dcdcdc' }}>
          Footer
        </div>
      </Split>
    </Split>
  </div>
);
ReactDOM.render(<Demo />, _mount_);
```

### 多栏分割

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
import Split from '@uiw/react-split';

const Demo = () => (
  <Split style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>
    <div>
      Left Pane
    </div>
    <div>
      Center Pane
    </div>
    <div>
      Center Pane
    </div>
    <div style={{ flex: 1 }}>
      Right Pane
    </div>
  </Split>
);
ReactDOM.render(<Demo />, _mount_);
```

### 线条拖拽

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
import Split from '@uiw/react-split';

const Demo = () => (
  <div>
    <Split lineBar style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>
      <div>
        Left Pane
      </div>
      <div>
        Center Pane
      </div>
      <div>
        Center Pane
      </div>
      <div style={{ flex: 1 }}>
        Right Pane
      </div>
    </Split>
    <Split mode="vertical" lineBar style={{ height: 210, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}>
      <div style={{ height: '33.3%' }}>
        Left Pane
      </div>
      <div style={{ height: '33.3%' }}>
        Center Pane
      </div>
      <div style={{ flex: 1 }}>
        Right Pane
      </div>
    </Split>
  </div>
);
ReactDOM.render(<Demo />, _mount_);
```

### 垂直分割

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
import Split from '@uiw/react-split';

const Demo = () => (
  <Split mode="vertical" style={{ height: 200, border: '1px solid #d5d5d5', borderRadius: 3 }}>
    <div style={{ height: '50%' }}>
      Top Pane
    </div>
    <div style={{ height: '50%' }}>
      Bottom Pane
    </div>
  </Split>
);
ReactDOM.render(<Demo />, _mount_);
```

### 嵌套使用

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
import Split from '@uiw/react-split';

const Demo = () => (
  <Split style={{ height: 200, border: '1px solid #d5d5d5', borderRadius: 3 }}>
    <Split mode="vertical">
      <div style={{ height: '50%' }}>
        Top Pane
      </div>
      <Split style={{ height: '50%' }}>
        <div>
          Left Pane
        </div>
        <div style={{ flex: 1 }}>
          Right Pane
        </div>
      </Split>
    </Split>
    <div style={{ flex: 1 }}>
      Right Pane
    </div>
  </Split>
);
ReactDOM.render(<Demo />, _mount_);
```

### 拖拽工具不显示

下面实例通过设置 `visiable` 的值来设置拖拽工具是否可见

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
import Split from '@uiw/react-split';

const Demo = () => (
  <div>
    <Split visiable={false} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>
      <div style={{ maxWidth: 100, backgroundColor: '#eaeaea' }}>
        Left Pane
      </div>
      <div style={{ flex: 1 }}>
        Right Pane
      </div>
    </Split>
    <Split visiable={[4, 5]} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}>
      <div style={{ maxWidth: 50, backgroundColor: '#eaeaea' }}>
        Pane 1
      </div>
      <div style={{ maxWidth: 60 }}>
        Pane 2
      </div>
      <div>
        Pane 3
      </div>
      <div>
        Pane 4
      </div>
      <div style={{ flex: 1 }}>
        Pane 5
      </div>
    </Split>
  </div>
);
ReactDOM.render(<Demo />, _mount_);
```

### 禁用拖拽

通过设置 `disable` 的值，禁用拖拽工具拖拽。

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
import Split from '@uiw/react-split';

const Demo = () => (
  <div>
    <Split disable style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>
      <div style={{ maxWidth: 100, backgroundColor: '#eaeaea' }}>
        Left Pane
      </div>
      <Split disable mode="vertical">
        <div>
          Top Pane
        </div>
        <div>
          Bottom Pane
        </div>
      </Split>
      <div style={{ flex: 1 }}>
        Right Pane
      </div>
    </Split>
    <Split disable={[4, 5]} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}>
      <div style={{ maxWidth: 50, backgroundColor: '#eaeaea' }}>
        Pane 1
      </div>
      <div style={{ maxWidth: 60 }}>
        Pane 2
      </div>
      <div>
        Pane 3
      </div>
      <div>
        Pane 4
      </div>
      <div style={{ flex: 1 }}>
        Pane 5
      </div>
    </Split>
  </div>
);
ReactDOM.render(<Demo />, _mount_);
```

### 抽屉

可拖拽左边栏宽度。

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
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 = {};
    if (this.state.width === 0) {
      styl.width = `0%`;
    } else {
      styl.width = this.state.width;
    }
    return (
      <>
        <div style={{ marginBottom: 10 }}>
          <Button type="primary" onClick={this.onClick.bind(this)}>{this.state.width === 0 ? '隐藏菜单' : '展示菜单'}</Button>
        </div>
        <Split lineBar visiable={this.state.width !== 0} style={{ border: '1px solid #d5d5d5', borderRadius: 3 }}>
          <div style={{ ...styl, overflow: 'hidden' }}>
            <Menu>
              <Menu.Item icon="heart-on" text="另存为" active />
              <Menu.Item icon="appstore" text="应用商城" />
              <Menu.Item icon="bar-chart" text="月统计报表导出" />
              <Menu.Item icon="setting" text="偏好设置" />
              <Menu.Divider />
              <Menu.Item icon="map" text="谷歌地图" />
            </Menu>
          </div>
          <div style={{ flex: 1, minWidth: 30 }}>
            Right Pane
          </div>
        </Split>
      </>
    )
  }
}
ReactDOM.render(<Demo />, _mount_);
```

## Props

| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| visiable | 设置拖拽的工具条，是否可见 | Boolean/Array | `true` |
| disable | 设置拖拽的工具条，禁用 | Boolean/Array | - |
| lineBar | 设置拖拽的工具条，为线条样式。 | Boolean | - |
| mode | 类型，可选值为 `horizontal` 或 `vertical` | String | `horizontal` |
| onDragging | 拖拽宽度/高度变化回调函数，宽度或者高度根据 mode 参数来确定 | Function(prePaneSize,<br />nextPaneSize,<br />nextPaneNumber) | - |
| onDragEnd | 拖拽结束的回调函数 | Function(prePaneSize,<br />nextPaneSize,<br />nextPaneNumber) | - |

## 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!