Splitter分隔面板
Splitter
分隔面板
自由切分指定区域
使用import{ Splitter }from"antd"; |
版本自 5.21.0 后支持 |
- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
初始化面板大小，面板大小限制。
受控调整尺寸。当 Panel 之间任意一方禁用 resizable，则其拖拽将被禁用。
使用垂直布局。
配置 collapsible 提供快捷收缩能力。可以通过 min 限制收缩后不能通过拖拽展开。
多面板
复杂组合面板，快捷折叠，禁止改变大小
延迟渲染模式，拖拽时不会立即更新大小，而是等到松手时才更新。
通用属性参考：通用属性
Splitter 组件需要通过子元素计算面板大小，因而其子元素仅支持
Splitter.Panel。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| layout | 布局方向 | horizontal | vertical | horizontal | - |
| onResizeStart | 开始拖拽之前回调 | (sizes: number[]) => void | - | - |
| onResize | 面板大小变化回调 | (sizes: number[]) => void | - | - |
| onResizeEnd | 拖拽结束回调 | (sizes: number[]) => void | - | - |
| lazy | 延迟渲染模式 | boolean | false | 5.23.0 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| 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 | - |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| splitBarDraggableSize | 拖拽标识元素大小 | number | 20 |
| splitBarSize | 拖拽元素大小 | number | 2 |
| splitTriggerSize | 拖拽触发区域大小 | number | 6 |
