Importimport { Splitter } from "antd"; |
Sourcecomponents/splitter |
Versionsupported since 5.21.0 |
Importimport { Splitter } from "antd"; |
Sourcecomponents/splitter |
Versionsupported since 5.21.0 |
Can be used to separate areas horizontally or vertically. When you need to freely drag and adjust the size of each area. When you need to specify the maximum and minimum width and height of an area.
Common props ref:Common props
The Splitter component needs to calculate the panel size through its child elements, so its child elements only support
Splitter.Panel
.
Property | Description | Type | Default | Version |
---|---|---|---|---|
classNames | Semantic structure className | Record<SemanticDOM, string> | - | 6.0.0 |
collapsibleIcon | custom collapsible icon | {start: ReactNode; end: ReactNode} | - | 6.0.0 |
draggerIcon | custom dragger icon | ReactNode | - | 6.0.0 |
Layout direction | horizontal | vertical | horizontal | - | |
lazy | Lazy mode | boolean | false | 5.23.0 |
orientation | Orientation direction | horizontal | vertical | horizontal | |
styles | Semantic structure style | Record<SemanticDOM, CSSProperties> | - | 6.0.0 |
vertical | Orientation,Simultaneously existing with orientation , orientation takes priority | boolean | false | |
onResize | Panel size change callback | (sizes: number[]) => void | - | - |
onResizeEnd | Drag end callback | (sizes: number[]) => void | - | - |
onResizeStart | Callback before dragging starts | (sizes: number[]) => void | - | - |
Property | Description | Type | Default | Version |
---|---|---|---|---|
collapsible | Quick folding | boolean | { start?: boolean; end?: boolean; showCollapsibleIcon?: boolean | 'auto' } | false | showCollapsibleIcon: 5.27.0 |
defaultSize | Initial panel size support number for px or 'percent%' usage | number | string | - | - |
max | Maximum threshold support number for px or 'percent%' usage | number | string | - | - |
min | Minimum threshold support number for px or 'percent%' usage | number | string | - | - |
resizable | Whether to enable drag and drop | boolean | true | - |
size | Controlled panel size support number for px or 'percent%' usage | number | string | - | - |
Token Name | Description | Type | Default Value |
---|---|---|---|
splitBarDraggableSize | Drag and drop the identity element size | number | 20 |
splitBarSize | Drag the element display size | number | 2 |
splitTriggerSize | Drag and drop trigger area size | number | 6 |
ShowCollapsibleIcon: