本组件基于 react-split-pane-next 1.0.6版本开发而来
解决了此组件本身有的bug以及添加了扩展性
Install
npm install react-split-pane-smart
# or if you use yarn
yarn add react-split-pane-smart
Usage
import SplitPane, { Pane } from 'react-split-pane-smart';
<SplitPane split="vertical">
<Pane initialSize="200px">You can use a Pane component</Pane>
<div>or you can use a plain old div</div>
<Pane initialSize="25%" minSize="10%" maxSize="500px">
Using a Pane allows you to specify any constraints directly
</Pane>
</SplitPane>;
SplitPane 可选属性有:
可选属性 | 作用 | 属性类型 | 默认值 |
---|---|---|---|
onDrag | 拖动分割线时回调 | (event: React.MouseEvent) => void | undefined |
resizerClassName | 分割线class | string | ‘’ |
resizerChildNode | 分割线子元素 | React.ReactNode | null |
resizerMouseOver | 分割线鼠标悬浮时回调函数 | (event: MouseEvent) => void | undefined |
onResizeEnd | 鼠标抬起时会触发,返回两个面板大小 | (value: [,number]) => void | undefined |
onResizeStart | 鼠标在分割线按下时会触发 | (event: MouseEvent) => void | undefined |
onChange | 布局发生变化时会调用 | (value: [number,number]) => void | undefined |
className | 类名 | string | undefined |
split | 排布方式 | string | vertical | horizontal |
resizerSize | 分割线宽度:计算元素大小时会用到 | number | 1 |
needExactSizes | 是否需要返回精确的地面板大小。关闭有利于性能。 | [string,string] | false |
Pane可选属性
可选属性 | 作用 | 属性类型 | 默认值 |
---|---|---|---|
className | 类型 | string | undefined |
initialSize | 第一次渲染时面板大小:可以是例如 ’1‘ 、'24%'`、'200px'类型的值 | string | '0' |
minSize | 面板最小值:类型如initialSize | string | undefined |
maxSize | 面板最大值:类型如initialSize | string | '100%' |
size | 设置面板值:类型如initialSize | string | undefined |
注意 | 当同时具有size和initialSize时,优先使用size渲染面板大小 |