You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
---
category: Components
type: 数据展示
title: Collapse
subtitle: 折叠面板
cols: 1
---
可以折叠/展开的内容区域。
## 何时使用
- 对复杂区域进行分组和隐藏，保持页面的整洁。
- `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。
## API
### Collapse
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| activeKey | 当前激活 tab 面板的 key | string\[]\|string\| number\[]\|number | 默认无，
| defaultActiveKey | 初始化选中面板的 key | string\[]\|string\| number\[]\|number | 无 | |
| bordered | 带边框风格的折叠面板 | boolean | `true` | |
| accordion | 手风琴模式 | boolean | `false` | |
| onChange | 切换面板的回调 | Function | 无 | |
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
| expandIconPosition | 设置图标位置 | `left` \| `right` | - | |
| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` | |
### Collapse.Panel
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | ------------------------------------------ | ----------------- | ------ | ---- |
| disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false | |
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
| header | 面板头内容 | string\|ReactNode | 无 | |
| key | 对应 activeKey | string\|number | 无 | |
| showArrow | 是否展示当前面板上的箭头 | boolean | `true` | |
| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | |