Splitter
Splitter
Importimport { Splitter } from 'antd'; |
 |
VOOZH | about |
|
VOOZH | about |
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 | Global Config |
|---|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 | 6.0.0 |
| collapsible | motion to enable collapse animation, icon to customize collapse icons | { motion?: boolean; icon?: { start?: ReactNode; end?: ReactNode } } | - | 6.4.0 | × |
| custom collapsible icon | {start?: ReactNode; end?: ReactNode} | - | 6.0.0 | × | |
| destroyOnHidden | Destroy panel content when collapsed (size is 0). Applies to all panels, can be overridden per panel | boolean | false | 6.4.0 | × |
| draggerIcon | custom dragger icon | ReactNode | - | 6.0.0 | × |
| Layout direction | horizontal | vertical | horizontal | - | × | |
| lazy | Lazy mode | boolean | false | 5.23.0 | × |
| onCollapse | Callback when expanding or collapsing | (collapsed: boolean[], sizes: number[]) => void | - | 5.28.0 | × |
| orientation | Orientation direction | horizontal | vertical | horizontal | × | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.0 | 6.0.0 |
| vertical | Orientation. Simultaneously existing with orientation, orientation takes priority | boolean | false | × | |
| onDraggerDoubleClick | Callback triggered when the dragger is double-clicked | (index: number) => void | - | 6.3.0 | × |
| 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 | - | - |
| destroyOnHidden | Destroy panel content when collapsed (size is 0). Overrides Splitter's destroyOnHidden | boolean | - | 6.4.0 |
| 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 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorFill | The darkest fill color is used to distinguish between the second and third level of fill color, and is currently only used in the hover effect of Slider. | string | rgba(0,0,0,0.15) |
| colorPrimary | Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. | string | #1677ff |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| borderRadiusXS | XS size border radius, used in some small border radius components, such as Segmented, Arrow and other components with small border radius. | number | 2 |
| controlHeightSM | SM component height | number | 24 |
| controlItemBgActive | Control the background color of control component item when active. | string | #e6f4ff |
| controlItemBgActiveHover | Control the background color of control component item when hovering and active. | string | #bae0ff |
| controlItemBgHover | Control the background color of control component item when hovering. | string | rgba(0,0,0,0.04) |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | 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 | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontSizeSM | Small font size | number | 12 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| motionEaseInOut | Preset motion curve. | string | cubic-bezier(0.645, 0.045, 0.355, 1) |
| zIndexPopupBase | Base zIndex of component like FloatButton, Affix which can be cover by large popup | number | 1000 |
Initialize panel size, panel size limit.
Control the size of the splitter. When one of the panels disables resizable, dragging will be disabled.
Use vertical layout.
Set collapsible to enable collapse. Can through min to limit dragging to expand when collapsed.
Set collapsible.showCollapsibleIcon to control the display mode of collapsible icons.
Multiple panels.
Complex combination panel, quick folding, prohibited from changing size
Lazy mode, dragging does not update the size immediately, but updates when released.
customize handle elements and style
You can customize the semantic dom style of Splitter by passing objects/functions through classNames and styles.
Double-click the dragger to reset the Splitter.Panel to its default size.
ShowCollapsibleIcon:
