ant-design/components/splitter/index.zh-CN.md
afc163 ecb099d8d1
docs(🔥): release 5.21.0 with Splitter component and variant buttons (#50948)
Co-authored-by: lijianan <574980606@qq.com>
2024-09-22 23:04:51 +08:00

2.4 KiB
Raw Blame History

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
cols
1
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 -

主题变量Design Token