Splitter分隔面板
Splitter
分隔面板
自由切分指定区域
使用import{ Splitter }from"antd"; |
版本自 5.21.0 后支持 |
- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
初始化面板大小，面板大小限制。
受控调整尺寸。当 Panel 之间任意一方禁用 resizable，则其拖拽将被禁用。
使用垂直布局。
配置 collapsible 提供快捷收缩能力。可以通过 min 限制收缩后不能通过拖拽展开。
多面板
复杂组合面板，快捷折叠，禁止改变大小
嵌套在标签页中。
面板 2 宽度为 0，面板 3 禁止调整大小。
通用属性参考：通用属性
Splitter 组件需要通过子元素计算面板大小，因而其子元素仅支持
Splitter.Panel。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| layout | 布局方向 | horizontal | vertical | horizontal | - |
| onResizeStart | 开始拖拽之前回调 | (sizes: number[]) => void | - | - |
| onResize | 面板大小变化回调 | (sizes: number[]) => void | - | - |
| onResizeEnd | 拖拽结束回调 | (sizes: number[]) => void | - | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| 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 |
