# 折叠面板 Collapse

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/collapse
- 资源: 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 无法渲染。

## 示例

- **基本用法**：用于将复杂的内容区域分组和隐藏，可折叠或展开，默认可以展开多个面板，也可以只展开某几个面板。
- **手风琴模式**：手风琴模式。
- **嵌套面板**：嵌套面板。
- **简洁面板**：通过使用 `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 |`-`|-|

---

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