Splitter 分割器

將版面分割為可調整大小區塊的組件。

基本用法

Splitter 基本示例

水平分割

左側面板

這是左側的內容區域

右側面板

這是右側的內容區域，可以通過拖拽中間的分割線來調整大小。

水平分割

左側面板

這是左側的內容區域

右側面板

這是右側的內容區域，可以通過拖拽中間的分割線來調整大小。

垂直分割

上方面板

這是上方的內容區域

下方面板

這是下方的內容區域

嵌套分割

左側面板

這是左側的內容區域

右上面板

這是右上方的面板

右下面板

這是右下方的面板

可收縮面板

可收縮面板

當拖拽到最小尺寸時，此面板會自動收縮

主內容面板

這是主要的內容區域

控制桿常亮

面板 A

面板 B

控制桿顏色

面板 A

面板 B

API

Splitter (SplitterGroup)

屬性

屬性名	說明	類型	默認值
direction	分割方向	'horizontal' | 'vertical'	必填
gap	面板間隙	number	0
color	分隔條顏色	string	-
autoSaveId	自動保存 ID	string | null	null
keyboardResizeBy	鍵盤調整步長	number	10

事件

事件名	說明	回調參數
layout	版面佈局變化時觸發	(val: number[])

SplitterPanel

屬性

屬性名	說明	類型	默認值
defaultSize	預設面板大小	number	-
minSize	最小面板大小	number	10
maxSize	最大面板大小	number	100
collapsible	是否可收縮	boolean	false
collapsedSize	收縮時大小	number	-
padding	面板內距	'none' | 'small' | 'default' | 'large'	'default'

事件

事件名	說明	回調參數
collapse	面板收縮時觸發	()
expand	面板展開時觸發	()
resize	面板大小變化時觸發	(size: number, prevSize: number)

SplitterResizeHandle

屬性

屬性名	說明	類型	默認值
visable	是否讓控制桿常亮	boolean	false
color	控制桿顏色	string	-
hoverColor	滑鼠懸停顏色	string	-
dragColor	拖拽時顏色	string	-
disabled	是否禁用	boolean	false

事件

事件名	說明	回調參數
dragging	拖拽狀態變化時觸發	(isDragging: boolean)

插槽 Slots

插槽名	說明
default	面板內容