Splitter
分隔面板

自由切分指定区域

使用import { Splitter } from "antd";

源码components/splitter

文档

编辑此页更新日志

版本自 5.21.0 起支持

何时使用

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

代码演示

First

Second

基本用法

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

First

Second

受控模式

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

First

Second

垂直方向

使用垂直布局。

First

Second

First

Second

可折叠

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

ShowCollapsibleIcon:

AutoTrueFalse

First

Second

Third

可折叠图标显示

配置 collapsible.showCollapsibleIcon 控制可折叠图标的显示方式。

5.27.0

Panel 1

Panel 2

Panel 3

多面板

Left

Top

Bottom

复杂组合

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

First

Second

First

Second

延迟渲染模式

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

5.23.0

Panel 1

Panel 2

Panel 3

First

Second

自定义样式

自定义操作元素样式

6.0.0

API

通用属性参考：通用属性

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

Splitter

参数	说明	类型	默认值	版本
classNames	语义化结构 className	Record<SemanticDOM, string>	-	6.0.0
collapsibleIcon	折叠图标	`{start?: ReactNode; end?: ReactNode}`	-	6.0.0
draggerIcon	拖拽图标	`ReactNode`	-	6.0.0
~~layout~~	布局方向	`horizontal` \| `vertical`	`horizontal`	-
lazy	延迟渲染模式	`boolean`	`false`	5.23.0
orientation	布局方向	`horizontal` \| `vertical`	`horizontal`	-
styles	语义化结构 style	Record<SemanticDOM, CSSProperties>	-	6.0.0
vertical	排列方向，与 `orientation` 同时存在，以 `orientation` 优先	boolean	`false`
onResize	面板大小变化回调	`(sizes: number[]) => void`	-	-
onResizeEnd	拖拽结束回调	`(sizes: number[]) => void`	-	-
onResizeStart	开始拖拽之前回调	`(sizes: number[]) => void`	-	-

Panel

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

Semantic DOM

First

Second

root
6.0.0
根元素
panel
6.0.0
面板元素
dragger
6.0.0
面板控制元素

主题变量（Design Token）

组件 Token如何定制？

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

全局 Token如何定制？

文档贡献者

API

通用属性参考：通用属性

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

Splitter

参数	说明	类型	默认值	版本
classNames	语义化结构 className	Record<SemanticDOM, string>	-	6.0.0
collapsibleIcon	折叠图标	`{start?: ReactNode; end?: ReactNode}`	-	6.0.0
draggerIcon	拖拽图标	`ReactNode`	-	6.0.0
~~layout~~	布局方向	`horizontal` \| `vertical`	`horizontal`	-
lazy	延迟渲染模式	`boolean`	`false`	5.23.0
orientation	布局方向	`horizontal` \| `vertical`	`horizontal`	-
styles	语义化结构 style	Record<SemanticDOM, CSSProperties>	-	6.0.0
vertical	排列方向，与 `orientation` 同时存在，以 `orientation` 优先	boolean	`false`
onResize	面板大小变化回调	`(sizes: number[]) => void`	-	-
onResizeEnd	拖拽结束回调	`(sizes: number[]) => void`	-	-
onResizeStart	开始拖拽之前回调	`(sizes: number[]) => void`	-	-

Panel

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

Token 名称

描述

类型

默认值

splitBarDraggableSize

拖拽标识元素大小

number

splitBarSize

拖拽元素显示大小

number

splitTriggerSize

拖拽触发区域大小

number

Splitter分隔面板

Splitter分隔面板

何时使用

代码演示

First

Second

First

Second

First

Second

First

Second

First

Second

First

Second

Third

Panel 1

Panel 2

Panel 3

Left

Top

Bottom

First

Second

First

Second

Panel 1

Panel 2

Panel 3

First

Second

API

Splitter

Panel

Semantic DOM

First

Second

root

panel

dragger

主题变量（Design Token）

何时使用

代码演示

First

Second

First

Second

First

Second

First

Second

First

Second

First

Second

Third

Panel 1

Panel 2

Panel 3

Left

Top

Bottom

First

Second

First

Second

Panel 1

Panel 2

Panel 3

First

Second

API

Splitter

Panel

Semantic DOM

First

Second

root

panel

Splitter
分隔面板

Splitter
分隔面板