Splitter 分割面板

用于把一个区域拆分为可调整尺寸的多个面板。

方向

禁用状态

尺寸

限制

自定义内容

API

Splitter Props

继承自 Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'onDoubleClick'>

属性名	描述	类型	默认值
children	面板内容。	ReactNode	-
size	受控尺寸数组，按百分比分配。	number[]	-
defaultSize	默认尺寸数组，按百分比分配。	number[]	-
orientation	分割方向。	'horizontal' | 'vertical'	-
disabled	禁用拖拽。	boolean	-
keyboardResizeStep	键盘每次调整的百分比。	number	-
resetOnDoubleClick	双击拖拽条恢复默认尺寸。	boolean	-
onResize	尺寸变化时触发。	(size: number[]) => void	-
onResizeStart	开始拖拽时触发。	(size: number[], index: number) => void	-
onResizeEnd	结束拖拽、键盘调整或重置后触发。	(size: number[], index: number) => void	-
onDoubleClick	双击拖拽条时触发。	(size: number[], index: number, evt: MouseEvent<HTMLDivElement>) => void	-

Splitter.Grip Props

等价于 HTMLAttributes<HTMLSpanElement>

Splitter.Panel Props

继承自 Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue'>

属性名	描述	类型	默认值
children	面板内容。	ReactNode	-
defaultSize	默认尺寸百分比。	number	-
min	最小尺寸百分比。	number	-
max	最大尺寸百分比。	number	-
resizable	是否允许相邻拖拽条调整该面板。	boolean	-