折叠面板 Collapse
可以折叠 / 展开的内容区域。
安装
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 无法渲染。
示例
- 基本用法：用于将复杂的内容区域分组和隐藏，可折叠或展开，默认可以展开多个面板，也可以只展开某几个面板。
- 手风琴模式：手风琴模式。
- 嵌套面板：嵌套面板。
- 简洁面板：通过使用
bordered=false来使用没有边框的简洁样式。 - 自定义面板样式：通过指定
style实现自定义的面板样式。 - 额外节点：通过
extra可以设置额外节点。 - 展开图标位置：可以通过
expandIconPosition属性设置展开 Icon 的位置。 - Lazyload：是否直到
Collapse.Item首次展开时才渲染children。 - 隐藏时销毁：通过
destroyOnHide属性可以设置销毁被折叠的面板。 - 指定折叠触发区域：通过
triggerRegion属性，设置面板可以触发折叠的区域。
示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。
API
Collapse
| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| accordion | 是否是手风琴模式 | boolean | - | - |
| bordered | 无边框样式 | boolean | true | - |
| destroyOnHide | 是否销毁被折叠的面板 | boolean | - | - |
| lazyload | 设置为 true 时，挂载时不会渲染被隐藏的面板。 | boolean | true | - |
| expandIconPosition | 展开图标的位置 | 'left' | 'right' | left | - |
| triggerRegion | 可触发折叠操作的区域 | 'header' | 'icon' | - | 2.41.0 |
| expandIcon | 自定义展开图标 | ReactNode | - | - |
| activeKey | 当前面板选中值 | string | string[] | - | - |
| className | 节点类名 | string | string[] | - | - |
| defaultActiveKey | 默认展开的面板 | string | string[] | - | - |
| style | 节点样式 | CSSProperties | - | - |
| onChange | 展开面板改变时触发 | (key: string, keys: string[], e) => void | - | - |
Collapse.Item
| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| destroyOnHide | 面板被折叠时是否销毁节点，优先级高于 Collapse 的 destroyOnHide | boolean | - | - |
| disabled | 是否禁用 | boolean | - | - |
| showExpandIcon | 是否展示展开按钮 | boolean | true | - |
| name | 对应 activeKey，当前面板组件的的唯一标识 | string (必填) | - | - |
| expandIcon | 自定义展开图标 | ReactNode | - | - |
| extra | 额外节点 | ReactNode | - | - |
| header | 折叠面板头部内容，允许自定义 | ReactNode | - | - |
| className | 节点类名 | string | string[] | - | - |
| contentStyle | 内容区域的附加样式。 | CSSProperties | - | 2.15.0 |
| style | 节点样式 | CSSProperties | - | - |