React 组件

Splitter 分割面板

通过 UGSplitter 与 UGSplitterPanel 组合多个可调整区域，支持横纵方向、尺寸约束、折叠、受控状态和完整拖拽生命周期。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGSplitter, UGSplitterPanel } from '@ug666/ui-react'

Splitter 负责排列和调整，SplitterPanel 声明每个区域；可拖动分隔条，也可用方向键、Home 和 End。

左侧

右侧

一个 Splitter 可组合两个以上 Panel，每条分隔线只调整相邻面板。

导航

工作区

属性

direction 改变排列方向，Panel 的 min/max 分别约束自身可调整范围。

编辑器

终端

通过 sizes 与 onSizesChange 管理完整比例数组，适合保存和恢复用户布局。

当前比例：28 / 44 / 28

导航

工作区

检查器

可折叠 Panel 在相邻分隔条上双击或按 Enter 切换；resizable=false 可锁定分隔线。

双击分隔条折叠

可调整

锁定

lazy 模式在拖拽期间只报告候选尺寸，松开指针后再更新面板，适合内容渲染成本较高的区域。

松开后更新

高成本内容

管理方向、完整尺寸数组、键盘步进和拖拽生命周期。

属性	类型	默认值	说明
direction	'horizontal' \| 'vertical'	'horizontal'	设置面板与分隔条方向。
defaultSizes / sizes	number[]	等分 / —	设置非受控初始比例或受控比例数组；组件会归一化为 100%，并按各面板 min / max 修正越界值。
keyboardStep	number	2	方向键每次调整的百分比。
lazy	boolean	false	拖拽期间不更新面板尺寸，松开指针后一次提交。
onSizesChange	(sizes: number[]) => void	—	任一分隔条变化时返回所有面板比例。
onCollapse	(detail: SplitterCollapseDetail) => void	—	任一面板折叠状态改变时，在根组件统一返回面板索引、折叠状态和完整尺寸数组。
onResizeStart / onResize / onResizeEnd	(detail: SplitterResizeDetail) => void	—	指针拖拽开始、过程和结束生命周期。
原生属性 / ref	HTMLAttributes<HTMLDivElement>	—	透传原生属性并暴露分割容器。

声明单个区域的初始尺寸、约束、折叠和调整能力。

属性	类型	默认值	说明
defaultSize	number	自动等分	设置当前面板的初始百分比。
min / max	number	0 / 100	限制当前面板的最小和最大百分比；传入顺序颠倒时按有效区间处理。
collapsible / collapsedSize	boolean / number	false / 0	允许通过相邻分隔条折叠；collapsedSize 会限制在 0 到 min 之间。
resizable	boolean	true	为 false 时锁定与该面板相邻的分隔条。
onCollapseChange	(collapsed: boolean) => void	—	面板确实进入或退出折叠状态后触发。
原生属性 / ref	HTMLAttributes<HTMLDivElement>	—	透传原生属性并暴露面板元素。
旧双栏 API	first / second / size / defaultSize / min / max	兼容	仅用于旧代码迁移；新代码使用 SplitterPanel 与 sizes。