ant-design/components/splitter/index.zh-CN.md
2024-09-11 13:51:04 +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

何时使用

需要展示多个内容,并且希望用户可以自由调整每个内容的大小。

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

代码演示

基本用法 受控模式 垂直方向 可折叠 多面板 复杂组合 调试

API

通用属性参考:通用属性

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