# 分隔面板

- 页面: https://jiguang132.com/zh/resources/ant-design/docs/splitter
- 资源: Ant Design (https://jiguang132.com/zh/resources/ant-design.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design/docs.md

自由切分指定区域


## 何时使用 {#when-to-use}

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

## 代码演示 {#examples}


- 基本用法 · `size`
- 受控模式 · `control`
- 垂直方向 · `vertical`
- 可折叠 · `collapsible`
- 可折叠图标显示 · `collapsibleIcon`
- 多面板 · `multiple`
- 复杂组合 · `group`
- 延迟渲染模式 · `lazy`
- 自定义样式 · `customize`
- 自定义语义结构的样式和类 · `style-class`
- 双击重置 · `reset`




## API

通用属性参考：[通用属性](#jguang-common-props)

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

### Splitter

| 参数 | 说明 | 类型 | 默认值 | 版本 | [全局配置](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classNames | 用于自定义组件内部各语义化结构的 class，支持对象或函数 | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), 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](#semantic-dom), CSSProperties> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), 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）{#design-token}

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

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

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

```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'> {}
```


## 原生通用属性 {#jguang-common-props}


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

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


## 安装并复现示例

```bash
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 许可，另列依赖的许可证也需保留。上传预览禁止向外发起请求，不提供后端服务。

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt