react-split-pane-smart

React Split Pane Smart

本组件基于 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渲染面板大小