ResizeBox
ResizeBox components.
Install
npm install @arco-design/web-react@2.66.18
Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.
Examples
- Basic: Basic usage of
ResizeBox. By setting directions, you can specify which of the four sides can be stretched.
- Customize Trigger: The content of trigger in all directions can be customized through the property
resizeTriggers.
- Controlled Size: The height and width of the
ResizeBox can be controlled, corresponding to the attributes width and height, and the height and width values during dragging can be obtained through onChange.
- Use in Layout: The
ResizeBox component is integrated in the Layout component, so a scalable sidebar can be used in the layout.
- Panel Split: Divide a panel into two parts with adjustable width or height. Use
direction to control the direction of the split.
- Panel Split Nesting: Panel split can be nested.
- Panel Split Group: Multiple panels can be split through
SplitGroup, and it also supports quick collapse and manual drag;
Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.
API
ResizeBox
| Property | Description | Type | DefaultValue | Version |
|---|
| height | The height of ResizeBox | number | - | 2.7.0 |
| width | The width of ResizeBox | number | - | 2.7.0 |
| component | The html tag of ResizeBox | string | div | - |
| directions | The edges can be Resize, It can be up, down, left, right | Array<'left' | 'right' | 'top' | 'bottom'> | ['right'] | - |
| className | Additional css class | string | string[] | - | - |
| resizeIcons | Custom the icon of Split,All four directions are supported | {top?: ReactNode;bottom?: ReactNode;left?: ReactNode;right?: ReactNode;} | {} | - |
| resizeTriggers | Custom the content of Split,All four directions are supported | {top?: ReactNode;bottom?: ReactNode;left?: ReactNode;right?: ReactNode;} | {} | - |
| style | Additional style | CSSProperties | - | - |
| onMoving | Callback when resizing | (e: MouseEvent, size: { width: number; height: number }) => void | - | size in 2.7.0 |
| onMovingEnd | Callback when the end of resize | () => void | - | - |
| onMovingStart | Callback when the start of resize. | () => void | - | - |
ResizeBox.Split
| Property | Description | Type | DefaultValue | Version |
|---|
| disabled | Whether the split is disabled | boolean | - | - |
| component | The html tag of Split | string | div | - |
| direction | The direction of Split. It can be horizontal and vertical | 'horizontal' | 'vertical' | 'horizontal-reverse' | 'vertical-reverse' | horizontal | reverse in 2.35.0 |
| icon | Custom the icon of Split | ReactNode | - | - |
| trigger | Custom the content of Split | ReactNode | - | - |
| className | Additional css class | string | string[] | - | - |
| max | Maximum threshold | number | string | - | - |
| min | Minimum threshold | number | string | - | - |
| panes | panes,[firstPane, secondPane] | ReactNode[] (Required) | - | - |
| size | Split size. It can be 0~1 representing a percentage, or a specific number of pixels, ex 300px | number | string | 0.5 | - |
| style | Additional style | CSSProperties | - | - |
| onMoving | Callback when moving | (e: MouseEvent, size: number | string) => void | - | size in 2.14.0 |
| onMovingEnd | Callback when the end of resize | () => void | - | - |
| onMovingStart | Callback when the start of resize | () => void | - | - |
| onPaneResize | Callback when pane resized | (paneContainers: HTMLElement[]) => void | - | 2.25.0 |
ResizeBox.SplitGroup in 2.27.0
| Property | Description | Type | DefaultValue |
|---|
| component | The html tag of SplitGroup | string | div |
| direction | The direction of Split. It can be horizontal and vertical | 'horizontal' | 'vertical' | horizontal |
| icon | Custom the icon of Split | ReactNode | - |
| className | Additional css class | string | string[] | - |
| panes | panes | SplitGroupPane[] (Required) | - |
| style | Additional style | CSSProperties | - |
| onMoving | Callback when moving | (e: MouseEvent, size: string[], activeIndex: number) => void | - |
| onMovingEnd | Callback when the end of resize | (activeIndex: number) => void | - |
| onMovingStart | Callback when the start of resize | (activeIndex: number) => void | - |
| onPaneResize | Callback when pane resized | (paneContainers: HTMLElement[]) => void | - |
ResizeBox.SplitGroup.CollapsedConfig
| Property | Description | Type | DefaultValue |
|---|
| onClick | Click the callback for quick folding | (e, collapsed, activeIndex, direction: 'prev' | 'next') => void | - |
| icon | Quick collapse button icon | ReactNode | - |
ResizeBox.SplitGroup.Pane
| Property | Description | Type | DefaultValue |
|---|
| disabled | disabled, the split bar will not be displayed | boolean | - |
| resizable | Whether to support drag and drop | boolean | true |
| content | The contents of the current panel | ReactNode (Required) | - |
| collapsible | Whether to support fast collapsed | | boolean| {prev?: boolean | CollapsedConfig;next?: boolean | CollapsedConfig;} | - |
| max | Minimum threshold | number | string | - |
| min | Maximum threshold, The priority is higher than max and will affect the threshold of adjacent panels. | number | string | - |
| size | The size of the segmentation can be 0~1 representing a percentage, or a pixel with a specific value, such as 300px | number | string | - |
| trigger | Customize the content of the Split | (prevNode: ReactNode, resizeNode: ReactNode, nextNode: ReactNode) => ReactNode | - |
