# 伸缩框 ResizeBox

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/resize-box
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

伸缩框组件。

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基础用法**：`ResizeBox` 伸缩框组件的基础使用。通过设置 `directions`，可以指定四条边中的哪几条边可以进行伸缩。
- **定制伸缩杆内容**：可通过属性 `resizeTriggers` 定制各个方向的伸缩杆的内容。
- **受控的高宽**：`ResizeBox` 的高宽都支持受控，分别对应属性 `width` 和 `height`，通过 `onChange` 得到拖动中的高宽值。
- **在布局中使用**：[Layout](/react/components/ResizeBox) 组件中集成了 `ResizeBox` 组件，可以在 Layout 中使用可伸缩的侧边栏。
- **面板分割**：将一个面板分割成两个可以调整宽度或高度的两部分。用`direction`控制分割方向。
- **面板分割嵌套**：面板分割可以嵌套使用。
- **多个面板分割**：可以通过 `SplitGroup` 进行多个面板分割，同时还支持快速收缩及手动收缩

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### ResizeBox

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|height|高度，受控属性|number |`-`|2.7.0|
|width|宽度，受控属性|number |`-`|2.7.0|
|component|伸缩框的 html 标签|string |`div`|-|
|directions|可以进行伸缩的边，有上、下、左、右可以使用，默认是右方向。|Array<'left' \| 'right' \| 'top' \| 'bottom'> |`['right']`|-|
|className|节点类名|string \| string[] |`-`|-|
|resizeIcons|定制伸缩杆的图标，四个方向都支持定制。|{top?: ReactNode;bottom?: ReactNode;left?: ReactNode;right?: ReactNode;} |`{}`|-|
|resizeTriggers|定制伸缩杆的内容，四个方向都支持定制。|{top?: ReactNode;bottom?: ReactNode;left?: ReactNode;right?: ReactNode;} |`{}`|-|
|style|节点样式|CSSProperties |`-`|-|
|onMoving|拖拽中的回调|(e: MouseEvent, size: { width: number; height: number }) => void |`-`|`size` in `2.7.0`|
|onMovingEnd|拖拽结束之后的回调|() => void |`-`|-|
|onMovingStart|开始拖拽之前的回调|() => void |`-`|-|

### ResizeBox.Split

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|disabled|禁用|boolean |`-`|-|
|component|分割框的 html 标签|string |`div`|-|
|direction|分割方向分为水平 `horizontal` 和垂直 `vertical`，默认是水平分割|'horizontal' \| 'vertical' \| 'horizontal-reverse' \| 'vertical-reverse' |`horizontal`|`reverse` in `2.35.0`|
|icon|定制伸缩杆的图标|ReactNode |`-`|-|
|trigger|定制伸缩杆的内容|ReactNode |`-`|-|
|className|节点类名|string \| string[] |`-`|-|
|max|最大阈值|number \| string |`-`|-|
|min|最小阈值|number \| string |`-`|-|
|panes|面板，[firstPane, secondPane]|ReactNode[]  **(必填)**|`-`|-|
|size|分割的大小，可以是 0~1 代表百分比，或具体数值的像素，如 300px|number \| string |`0.5`|-|
|style|节点样式|CSSProperties |`-`|-|
|onMoving|拖拽中的回调|(e: MouseEvent, size: number \| string) => void |`-`|`size` in `2.14.0`|
|onMovingEnd|拖拽结束之后的回调|() => void |`-`|-|
|onMovingStart|开始拖拽之前的回调|() => void |`-`|-|
|onPaneResize|面板大小变化的回调|(paneContainers: HTMLElement[]) => void |`-`|2.25.0|

### ResizeBox.SplitGroup in `2.27.0`

|参数名|描述|类型|默认值|
|---|---|---|---|
|component|分割框的 html 标签|string |`div`|
|direction|分割方向分为水平 `horizontal` 和垂直 `vertical`，默认是水平分割|'horizontal' \| 'vertical' |`horizontal`|
|icon|定制伸缩杆的图标|ReactNode |`-`|
|className|节点类名|string \| string[] |`-`|
|panes|面板|[SplitGroupPane](resize-box#resizeboxsplitgrouppane)[]  **(必填)**|`-`|
|style|节点样式|CSSProperties |`-`|
|onMoving|拖拽中的回调, `size` 参数是各个面板占的像素值|(e: MouseEvent, size: string[], activeIndex: number) => void |`-`|
|onMovingEnd|拖拽结束之后的回调|(activeIndex: number) => void |`-`|
|onMovingStart|开始拖拽之前的回调|(activeIndex: number) => void |`-`|
|onPaneResize|面板大小变化的回调|(paneContainers: HTMLElement[]) => void |`-`|

### ResizeBox.SplitGroup.CollapsedConfig

|参数名|描述|类型|默认值|
|---|---|---|---|
|onClick|点击快速折叠的回调|(e, collapsed, activeIndex, direction: 'prev' \| 'next') => void |`-`|
|icon|快速折叠按钮的icon|ReactNode |`-`|

### ResizeBox.SplitGroup.Pane

|参数名|描述|类型|默认值|
|---|---|---|---|
|disabled|禁用，将不会展示伸缩杆。|boolean |`-`|
|resizable|是否支持拖拽伸缩|boolean |`true`|
|content|当前面板的内容|ReactNode  **(必填)**|`-`|
|collapsible|是否支持快速折叠;|\| boolean\| {prev?: boolean \| [CollapsedConfig](resize-box#resizeboxsplitgroupcollapsedconfig);next?: boolean \| [CollapsedConfig](resize-box#resizeboxsplitgroupcollapsedconfig);} |`-`|
|max|最大阈值|number \| string |`-`|
|min|最小阈值，优先级比 `max`高，并且会影响相邻面板的阈值。|number \| string |`-`|
|size|分割的大小，可以是 0~1 代表百分比，或具体数值的像素，如 300px|number \| string |`-`|
|trigger|定制伸缩杆内容, 参数分别表示向前快速收缩、拖拽伸缩触发器、向后快速收缩的触发器|(prevNode: ReactNode, resizeNode: ReactNode, nextNode: ReactNode) => ReactNode |`-`|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt