介绍
@leiko/m-react-splitters 是一个 React 分割器组件库，可以用于在页面中划分多个区域，并支持拖拽调整大小。
该组件库建立在 m-react-splitters 之上，并对原有组件进行了优化和功能扩展。
安装
使用 npm 安装 @leiko/m-react-splitters：
npm install @leiko/m-react-splitters
使用
使用 @leiko/m-react-splitters 非常简单，只需要在需要划分区域的地方引入 Splitter 组件即可。
例如，我们需要在页面中将内容区域分为两部分，左侧固定宽度，右侧可拖拽调整宽度。可以使用以下代码实现：
-- -------------------- ---- -------
------ - --------- ------------- ----------- - ---- ---------------------------
-------- ----- -
------ -
--------- -----------------------
------------- -------------
-------- ----- --------
---------------
------------ --
--------------
------------ --------
---------------
-----------
--
-上述代码中，Splitter 组件表示整个划分区域的容器，SplitterArea 组件表示划分后的每个区域，SplitterBar 组件表示可拖拽的分割条。
属性
@leiko/m-react-splitters 提供了丰富的属性设置，以下是主要属性说明：
Splitter
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| className | string | 整个 Splitter 容器的 class 名称 | |
| style | CSSProperties | 整个 Splitter 容器的样式 | |
| direction | 'horizontal' 'vertical' |
'horizontal' | 划分区域的方向 |
| primaryIndex | number | 0 | 设置哪个区域为主区域，主区域的大小变化会影响其他区域的大小。 |
| minWidth | number | 容器最小可调整宽度 | |
| minHeight | number | 容器最小可调整高度 | |
| gutterSize | number | 10 | 分割条的大小 |
| gutterAlign | 'center' 'start' 'end' |
'center' | 分割条的排列方式 |
| onDragStart | Function | 拖拽开始时的回调函数 | |
| onDragEnd | Function | 拖拽结束时的回调函数 | |
| onDrag | Function | 拖拽中的回调函数 | |
| onSecondaryPaneSizeChange | Function | 主区域大小变化时的回调函数 |
SplitterArea
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| className | string | 区域的 class 名称 | |
| style | CSSProperties | 区域的样式 | |
| size | string | 'auto' | 区域的大小，支持百分比或像素值 |
| minSize | string | 区域的最小大小，支持百分比或像素值 | |
| maxSize | string | 区域的最大大小，支持百分比或像素值 | |
| collapsible | boolean | false | 区域是否可折叠 |
| collapsed | boolean | false | 区域是否默认折叠 |
| onResizeStart | Function | 调整大小开始时的回调函数 | |
| onResizeEnd | Function | 调整大小结束时的回调函数 | |
| onResize | Function | 调整大小中的回调函数 |
SplitterBar
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| className | string | 分割条的 class 名称 | |
| style | CSSProperties | 分割条的样式 |
示例代码
以下是一个完整的例子，演示了如何在页面中使用 @leiko/m-react-splitters 划分布局：
-- -------------------- ---- -------
------ - --------- ------------- ----------- - ---- ---------------------------
-------- ----- -
------ -
--------- ---------------------- ---------------
------------- ------------ --------------- ----------------
-------- ----- --------
---------------
------------ --
----------
------------- ------------ --------------- ----------------
-------- ------ --------
---------------
------------ --
--------------
------------ --------
---------------
-----------
-----------
--
-结语
@leiko/m-react-splitters 组件库提供了一种简单、易用的方式，可以在页面中轻松划分多个区域，并支持拖拽调整大小。
希望这篇教程对大家有所帮助，让大家能够更加轻松地使用该组件库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5451ab1864dac669ac