Splitter
Importimport{ Splitter }from"antd"; |
Sourcecomponents/splitter |
Versionsupported since 5.21.0 |
When To Use
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.
Examples
First
Second
Initialize panel size, panel size limit.
First
Second
Control the size of the splitter. When one of the panels disables resizable, dragging will be disabled.
First
Second
Use vertical layout.
First
Second
First
Second
Set collapsible to enable collapse. Can through min to limit dragging to expand when collapsed.
Panel 1
Panel 2
Panel 3
Multiple panels.
Left
Top
Bottom
Complex combination panel, quick folding, prohibited from changing size
First
Second
First
Second
Lazy mode, dragging does not update the size immediately, but updates when released.
Panel 1
Panel 2
Panel 3
First
Second
customize handle elements and style
API
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.
Splitter
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| layout | Layout direction | horizontal | vertical | horizontal | - |
| onResizeStart | Callback before dragging starts | (sizes: number[]) => void | - | - |
| onResize | Panel size change callback | (sizes: number[]) => void | - | - |
| onResizeEnd | Drag end callback | (sizes: number[]) => void | - | - |
| lazy | Lazy mode | boolean | false | 5.23.0 |
| collapsibleIcon | custom collapsible icon | {start: ReactNode; end: ReactNode} | - | 6.0.0 |
| draggerIcon | custom dragger icon | ReactNode | - | 6.0.0 |
Panel
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| defaultSize | Initial panel size support number for px or 'percent%' usage | number | string | - | - |
| min | Minimum threshold support number for px or 'percent%' usage | number | string | - | - |
| max | Maximum threshold support number for px or 'percent%' usage | number | string | - | - |
| size | Controlled panel size support number for px or 'percent%' usage | number | string | - | - |
| collapsible | Quick folding | boolean | { start?: boolean; end?: boolean } | false | - |
| resizable | Whether to enable drag and drop | boolean | true | - |
Design Token
Component TokenHow to use?
| 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 |