使用import { Splitter } from 'antd'; |
文档贡献者
通用属性参考：通用属性
Splitter 组件需要通过子元素计算面板大小，因而其子元素仅支持
Splitter.Panel。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| classNames | 用于自定义组件内部各语义化结构的 class，支持对象或函数 | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| collapsible | motion 是否开启折叠动画，icon 自定义折叠图标 | { motion?: boolean; icon?: { start?: ReactNode; end?: ReactNode } } | - | 6.4.0 |
| 折叠图标 | {start?: ReactNode; end?: ReactNode} | - | 6.0.0 | |
| destroyOnHidden | 折叠时（size 为 0）销毁面板内容，应用于所有面板，可在单个面板上覆盖 | boolean | false | 6.4.0 |
| draggerIcon | 拖拽图标 | ReactNode | - | 6.0.0 |
| 布局方向 | horizontal | vertical | horizontal | - | |
| lazy | 延迟渲染模式 | boolean | false | 5.23.0 |
| onCollapse | 展开-收起时回调 | (collapsed: boolean[], sizes: number[]) => void | - | 5.28.0 |
| orientation | 布局方向 | horizontal | vertical | horizontal | - |
| styles | 用于自定义组件内部各语义化结构的行内 style，支持对象或函数 | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | |
| vertical | 排列方向，与 orientation 同时存在，以 orientation 优先 | boolean | false | |
| onDraggerDoubleClick | 双击拖拽条回调 | (index: number) => void | - | 6.3.0 |
| onResize | 面板大小变化回调 | (sizes: number[]) => void | - | - |
| onResizeEnd | 拖拽结束回调 | (sizes: number[]) => void | - | - |
| onResizeStart | 开始拖拽之前回调 | (sizes: number[]) => void | - | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| collapsible | 快速折叠 | boolean | { start?: boolean; end?: boolean; showCollapsibleIcon?: boolean | 'auto' } | false | showCollapsibleIcon: 5.27.0 |
| defaultSize | 初始面板大小，支持数字 px 或者文字 '百分比%' 类型 | number | string | - | - |
| destroyOnHidden | 折叠时（size 为 0）销毁面板内容，覆盖 Splitter 的 destroyOnHidden | boolean | - | 6.4.0 |
| max | 最大阈值，支持数字 px 或者文字 '百分比%' 类型 | number | string | - | - |
| min | 最小阈值，支持数字 px 或者文字 '百分比%' 类型 | number | string | - | - |
| resizable | 是否开启拖拽伸缩 | boolean | true | - |
| size | 受控面板大小，支持数字 px 或者文字 '百分比%' 类型 | number | string | - | - |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| splitBarDraggableSize | 拖拽标识元素大小 | number | 20 |
| splitBarSize | 拖拽元素显示大小 | number | 2 |
| splitTriggerSize | 拖拽触发区域大小 | number | 6 |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| colorFill | 最深的填充色，用于拉开与二、三级填充色的区分度，目前只用在 Slider 的 hover 效果。 | string | rgba(0,0,0,0.15) |
| colorPrimary | 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义 | string | #1677ff |
| colorText | 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。 | string | rgba(0,0,0,0.88) |
| borderRadiusXS | XS号圆角，用于组件中的一些小圆角，如 Segmented 、Arrow 等一些内部圆角的组件样式中。 | number | 2 |
| controlHeightSM | 较小的组件高度 | number | 24 |
| controlItemBgActive | 控制组件项在激活状态下的背景颜色。 | string | #e6f4ff |
| controlItemBgActiveHover | 控制组件项在鼠标悬浮且激活状态下的背景颜色。 | string | #bae0ff |
| controlItemBgHover | 控制组件项在鼠标悬浮时的背景颜色。 | string | rgba(0,0,0,0.04) |
| fontFamily | Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。 | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。 | number | 14 |
| fontSizeSM | 小号字体大小 | number | 12 |
| lineHeight | 文本行高 | number | 1.5714285714285714 |
| motionDurationSlow | 动效播放速度，慢速。用于大型元素如面板动画交互 | string | 0.3s |
| motionEaseInOut | 预设动效曲率 | string | |
| zIndexPopupBase | 浮层类组件的基础 Z 轴值，用于一些悬浮类的组件的可以基于该值 Z 轴控制层级，例如 FloatButton、 Affix、Modal 等 | number | 1000 |
ShowCollapsibleIcon: