mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
2.5 KiB
2.5 KiB
category | group | title | subtitle | description | cover | coverDark | demo | tag | ||
---|---|---|---|---|---|---|---|---|---|---|
Components | 布局 | Splitter | 分隔面板 | 自由切分指定区域 | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*f0SISaETY0wAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*y92yRYhObU8AAAAAAAAAAAAADrJ8AQ/original |
|
5.21.0 |
何时使用
- 可以水平或垂直地分隔区域。
- 当需要自由拖拽调整各区域大小。
- 当需要指定区域的最大最小宽高时。
代码演示
基本用法
受控模式
垂直方向
可折叠
多面板
复杂组合
标签页中嵌套
调试
API
通用属性参考:通用属性
Splitter 组件需要通过子元素计算面板大小,因而其子元素仅支持
Splitter.Panel
。
Splitter
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
layout | 布局方向 | horizontal | vertical |
horizontal |
- |
onResizeStart | 开始拖拽之前回调 | (sizes: number[]) => void |
- | - |
onResize | 面板大小变化回调 | (sizes: number[]) => void |
- | - |
onResizeEnd | 拖拽结束回调 | (sizes: number[]) => void |
- | - |
Panel
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
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 |
- |