分隔面板 Splitter - Ant Design

何时使用

可以水平或垂直地分隔区域。
当需要自由拖拽调整各区域大小。
当需要指定区域的最大最小宽高时。

代码演示

First

Second

初始化面板大小，面板大小限制。

First

Second

受控调整尺寸。当 Panel 之间任意一方禁用 resizable，则其拖拽将被禁用。

First

Second

使用垂直布局。

First

Second

First

Second

配置 collapsible 提供快捷收缩能力。可以通过 min 限制收缩后不能通过拖拽展开。

Panel 1

Panel 2

Panel 3

多面板

Left

Top

Bottom

复杂组合面板，快捷折叠，禁止改变大小

First

Second

First

Second

延迟渲染模式

延迟渲染模式，拖拽时不会立即更新大小，而是等到松手时才更新。

5.23.0

API

通用属性参考：通用属性

Splitter 组件需要通过子元素计算面板大小，因而其子元素仅支持 Splitter.Panel。

Splitter

参数	说明	类型	默认值	版本
layout	布局方向	`horizontal` \| `vertical`	`horizontal`	-
onResizeStart	开始拖拽之前回调	`(sizes: number[]) => void`	-	-
onResize	面板大小变化回调	`(sizes: number[]) => void`	-	-
onResizeEnd	拖拽结束回调	`(sizes: number[]) => void`	-	-
lazy	延迟渲染模式	`boolean`	`false`	5.23.0

Panel

参数	说明	类型	默认值	版本
defaultSize	初始面板大小，支持数字 px 或者文字 '百分比%' 类型	`number \| string`	-	-
min	最小阈值，支持数字 px 或者文字 '百分比%' 类型	`number \| string`	-	-
max	最大阈值，支持数字 px 或者文字 '百分比%' 类型	`number \| string`	-	-
size	受控面板大小，支持数字 px 或者文字 '百分比%' 类型	`number \| string`	-	-
collapsible	快速折叠	`boolean \| { start?: boolean; end?: boolean }`	`false`	-
resizable	是否开启拖拽伸缩	`boolean`	`true`	-

主题变量（Design Token）

组件 Token如何定制？

Token 名称	描述	类型	默认值
splitBarDraggableSize	拖拽标识元素大小	number	20
splitBarSize	拖拽元素大小	number	2
splitTriggerSize	拖拽触发区域大小	number	6

全局 Token如何定制？