Splitter
Splitter
Split panels to isolate
가져오기import{ Splitter }from"antd"; |
버전5.21.0 이후 지원됨 |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
가져오기import{ Splitter }from"antd"; |
버전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 |
|---|---|---|---|---|
| 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 | - | - |
| 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 | - |
| 토큰 이름 | 설명 | 타입 | 기본값 |
|---|---|---|---|
| resizeSpinnerSize | 可改变大小标识 元素大小 | number | 20 |
| splitBarSize | 拖拽标识元素大小 | number | 2 |
| splitTriggerSize | 拖拽触发区域大小 | number | 6 |
