react-split-pane 使用说明

拆分面板组件 react-split-pane。在使用开发工具时，例如vscode会发现左侧的的项目目录区域可以拖拽改变大小，react-split-pane 这个工具就是可以做到这种效果。

地址：https://www.npmjs.com/package/react-split-pane

安装

yarn add react-split-pane

使用

import React from 'react;
import SplitPane from 'react-split-pane'
const Demo: React.FC = () => {
	return (
		<SplitPane split="horizontal">
          <div>
            <span>首页</span>
          </div>
          <div>
            content
          </div>
       </SplitPane>
   );
}

# 样式是必须的不然没效果，当然除了提供全局方式设置样式，还可以通过props设置指定区域的样式
.Resizer {
  background: #000;
  opacity: 0.2;
  z-index: 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

.Resizer:hover {
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
}

.Resizer.horizontal {
  height: 11px;
  margin: -5px 0;
  border-top: 5px solid rgba(255, 255, 255, 0);
  border-bottom: 5px solid rgba(255, 255, 255, 0);
  cursor: row-resize;
  width: 100%;
}

.Resizer.horizontal:hover {
  border-top: 5px solid rgba(0, 0, 0, 0.5);
  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
}

.Resizer.vertical {
  width: 11px;
  margin: 0 -5px;
  border-left: 5px solid rgba(255, 255, 255, 0);
  border-right: 5px solid rgba(255, 255, 255, 0);
  cursor: col-resize;
}

.Resizer.vertical:hover {
  border-left: 5px solid rgba(0, 0, 0, 0.5);
  border-right: 5px solid rgba(0, 0, 0, 0.5);
}
.Resizer.disabled {
  cursor: not-allowed;
}
.Resizer.disabled:hover {
  border-color: transparent;
}

Props说明

• allowResize?: boolean; 设置是否允许拖拽
• className?: string; 设置最外层容器的样式名称
• primary?: ‘first’ | ‘second’; 设置主要区域是第一个还是第二个
• minSize?: Size; 设置主要区域的最小尺寸
• maxSize?: Size; 设置主要区域的最大尺寸
• defaultSize?: Size; 设置主要区域的默认尺寸
• split?: ‘vertical’ | ‘horizontal’; 设置拆分方向，水平方向还是竖直方向
• onDragStarted?: () => void; 拖拽开始时的回调
• onDragFinished?: (newSize: number) => void; 拖拽完成时的回调
• onChange?: (newSize: number) => void; 面板尺寸发生变化时的回调
• onResizerClick?: (event: MouseEvent) => void; 点击中间的拖拽区域的回调
• onResizerDoubleClick?: (event: MouseEvent) => void; 双击中间拖拽区域的回调
• style?: React.CSSProperties; 设置组件根节点样式
• resizerStyle?: React.CSSProperties; 设置中间推拽区域的样式
• paneStyle?: React.CSSProperties; 设置面板样式（内部可被拆分的面板的样式）
• pane1Style?: React.CSSProperties; 设置面板样式（内部可被拆分的面板1的样式）
• pane2Style?: React.CSSProperties; 设置面板样式（内部可被拆分的面板2的样式）
• resizerClassName?: string; 设置中间拖拽区域的样式名称
• step?: number; 设置拖拽开始到变化之间的距离。（就是说如果设置了100那么只要拖拽距离大于100px时被拖拽面板才会发生尺寸变化，这个属性基本不用管）