分隔面板

自由切分指定区域

何时使用

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

代码演示

API

通用属性参考：通用属性

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

Splitter

参数	说明	类型	默认值	版本	全局配置
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-	6.0.0	6.0.0
collapsible	`motion` 是否开启折叠动画，`icon` 自定义折叠图标	`{ motion?: boolean; icon?: { start?: ReactNode; end?: ReactNode } }`	-	6.4.0	×
~~collapsibleIcon~~	折叠图标	`{start?: ReactNode; end?: ReactNode}`	-	6.0.0	×
destroyOnHidden	折叠时（size 为 0）销毁面板内容，应用于所有面板，可在单个面板上覆盖	`boolean`	`false`	6.4.0	×
draggerIcon	拖拽图标	`ReactNode`	-	6.0.0	×
~~layout~~	布局方向	`horizontal` \| `vertical`	`horizontal`	-	×
lazy	延迟渲染模式	`boolean`	`false`	5.23.0	×
onCollapse	展开-收起时回调	`(collapsed: boolean[], sizes: number[]) => void`	-	5.28.0	×
orientation	布局方向	`horizontal` \| `vertical`	`horizontal`	6.0.0	×
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-	6.0.0	6.0.0
vertical	排列方向，与 `orientation` 同时存在，以 `orientation` 优先	boolean	`false`	6.0.0	×
onDraggerDoubleClick	双击拖拽条回调	`(index: number) => void`	-	6.3.0	×
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`	-	-
destroyOnHidden	折叠时（size 为 0）销毁面板内容，覆盖 Splitter 的 `destroyOnHidden`	`boolean`	-	6.4.0
max	最大阈值，支持数字 px 或者文字 '百分比%' 类型	`number \| string`	-	-
min	最小阈值，支持数字 px 或者文字 '百分比%' 类型	`number \| string`	-	-
resizable	是否开启拖拽伸缩	`boolean`	`true`	-
size	受控面板大小，支持数字 px 或者文字 '百分比%' 类型	`number \| string`	-	-

Semantic DOM

语义节点	原生说明	版本
`root`	根元素，设置flex布局、宽度高度、对齐方式和拉伸样式	6.0.0
`panel`	面板元素，设置flex基础值、增长比例和面板容器样式	6.0.0
`dragger`	拖拽控制元素，设置绝对定位、用户选择、层级、居中对齐、背景色、悬停态和激活态样式	6.0.0

语义说明来源: vendor/components/splitter/demo/_semantic.tsx

主题变量（Design Token）

类型、继承关系和原生令牌声明保持固定源码原文；默认值由原生主题计算，并可能受 ConfigProvider 覆盖。本表不伪造静态默认值。

令牌	类型	原生说明
`resizeSpinnerSize`	`number`	拖拽标识元素大小
`splitBarDraggableSize`	`number`	拖拽标识元素大小
`splitBarSize`	`number`	拖拽元素显示大小
`splitTriggerSize`	`number`	拖拽触发区域大小

声明来源: vendor/components/splitter/style/index.ts

import type { CSSObject } from '@ant-design/cssinjs';

import { genFocusOutline, resetComponent } from '../../style';

import { genNoMotionStyle } from '../../style/motion';

import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks } from '../../theme/internal';

import { genCssVar } from '../../theme/util/genStyleUtils';

export interface ComponentToken {
  /**
   * @desc 拖拽标识元素大小
   * @descEN Drag and drop the identity element size
   * @deprecated Please use `splitBarDraggableSize` instead.
   */
  resizeSpinnerSize: number;
  /**
   * @desc 拖拽标识元素大小
   * @descEN Drag and drop the identity element size
   */
  splitBarDraggableSize: number;
  /**
   * @desc 拖拽元素显示大小
   * @descEN Drag the element display size
   */
  splitBarSize: number;
  /**
   * @desc 拖拽触发区域大小
   * @descEN Drag and drop trigger area size
   */
  splitTriggerSize: number;
}

interface SplitterToken extends FullToken<'Splitter'> {}

原生通用属性

Tips: 以下通用属性适用于 antd 大部分组件，不支持的组件会单独说明。

参数	说明	类型	默认值
style	自定义样式	CSSProperties	-
className	自定义类名	string	-
rootClassName	添加在组件最外层的 className	string	-
autoFocus	自动获取焦点，仅对表单类、链接、交互容器等可聚焦元素生效	boolean	false

安装并复现示例

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

使用 ConfigProvider 和原生 App，并单独配置 dayjs 语言。每个示例在查看代码中列出完整源码文件和额外固定依赖。示例名称用于选择演示，不是组件通用属性。主题、语言与 SSR 初始化见资源安装指南。

原生类型参考

源码查看器包含未修改的原生实现和以下声明文件，继承类型仍位于原生包中。代码中的英文注释保留为源码参考。

vendor/components/splitter/SplitBar.tsx
vendor/components/splitter/Splitter.tsx
vendor/components/splitter/hooks/sizeUtil.ts
vendor/components/splitter/hooks/useItems.ts
vendor/components/splitter/hooks/useResizable.ts
vendor/components/splitter/index.tsx
vendor/components/splitter/interface.ts
vendor/components/splitter/style/index.ts

来源与许可

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

保留原生中英文正文与可执行示例；官网专用的嵌入章节和令牌表格在本地展开。Ant Design 使用 MIT 许可，另列依赖的许可证也需保留。上传预览禁止向外发起请求，不提供后端服务。