ant-design/components/collapse/index.zh-CN.md

---
category: Components
type: 数据展示
title: Collapse
subtitle: 折叠面板
cols: 1
---

可以折叠/展开的内容区域。

## 何时使用

- 对复杂区域进行分组和隐藏，保持页面的整洁。
- `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。

## API

### Collapse

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| activeKey | 当前激活 tab 面板的 key | string\[]\|string | 默认无，accordion模式下默认第一个元素 |
| defaultActiveKey | 初始化选中面板的 key | string | 无 |
| bordered | 带边框风格的折叠面板 | boolean | `true` |
| accordion | 手风琴模式 | boolean | `false` |
| onChange | 切换面板的回调 | Function | 无 |
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - |
| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` |

### Collapse.Panel

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false |
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
| header | 面板头内容 | string\|ReactNode | 无 |
| key | 对应 activeKey | string | 无 |
| showArrow | 是否展示当前面板上的箭头 | boolean | `true` |
| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - |

## FAQ

### 我希望箭头在右边，怎么做？

通过样式调整，将箭头放到右边就行啦：<https://codesandbox.io/s/vpm8qwo37>
-												docs: update documentation format

											
										
										
											2016-03-31 14:17:09 +08:00
+								---
 								category: Components
-												:globe_with_meridians: site: transition component category, close #11629

											
										
										
											2018-11-04 16:20:35 +08:00
+								type: 数据展示
-												docs: collapse-translation (#2216)


											
										
										
											2016-07-04 10:51:50 +08:00
+								title: Collapse
 								subtitle: 折叠面板
-												Feat collapse bordered (#3698)

* update ts types

* Add borderless style Collapse, close #3559

* update Collapse mix demo

* update demo description

											
										
										
											2016-11-06 15:06:34 +08:00
+								cols: 1
-												docs: update documentation format

											
										
										
											2016-03-31 14:17:09 +08:00
+								---
-												二期组件挖坑

											
										
										
											2015-06-15 22:01:39 +08:00
-												更新组件文案

											
										
										
											2015-06-26 14:42:30 +08:00
+								可以折叠/展开的内容区域。
-												有逼格占坑

											
										
										
											2015-06-17 20:24:42 +08:00
-												更新组件文案

											
										
										
											2015-06-26 14:42:30 +08:00
+								## 何时使用
-												有逼格占坑

											
										
										
											2015-06-17 20:24:42 +08:00
-												更新组件文案

											
										
										
											2015-06-26 14:42:30 +08:00
+								- 对复杂区域进行分组和隐藏，保持页面的整洁。
 								- `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。
-												feat: add component collapse

											
										
										
											2015-07-11 10:17:58 +08:00
 								## API
 								### Collapse
-												docs: sort api table

											
										
										
											2017-10-25 10:25:44 +08:00
+								| 参数 | 说明 | 类型 | 默认值 |
 								| --- | --- | --- | --- |
 								| activeKey | 当前激活 tab 面板的 key | string\[]\|string | 默认无，accordion模式下默认第一个元素 |
 								| defaultActiveKey | 初始化选中面板的 key | string | 无 |
-												Add expandIcon for Collapse (#14060)

close #14058 #12212
											
										
										
											2019-01-23 10:41:07 +08:00
+								| bordered | 带边框风格的折叠面板 | boolean | `true` |
 								| accordion | 手风琴模式 | boolean | `false` |
-												docs: sort api table

											
										
										
											2017-10-25 10:25:44 +08:00
+								| onChange | 切换面板的回调 | Function | 无 |
-												Add expandIcon for Collapse (#14060)

close #14058 #12212
											
										
										
											2019-01-23 10:41:07 +08:00
+								| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - |
 								| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` |
-												feat: add component collapse

											
										
										
											2015-07-11 10:17:58 +08:00
 								### Collapse.Panel
-												docs: sort api table

											
										
										
											2017-10-25 10:25:44 +08:00
+								| 参数 | 说明 | 类型 | 默认值 |
 								| --- | --- | --- | --- |
-												feat: Collapse.Panel supports disabled, close: #6119

											
										
										
											2017-05-17 12:05:42 +08:00
+								| disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false |
-												docs: sort api table

											
										
										
											2018-06-24 17:09:18 +08:00
+								| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
-												docs: sort api table

											
										
										
											2017-10-25 10:25:44 +08:00
+								| header | 面板头内容 | string\|ReactNode | 无 |
 								| key | 对应 activeKey | string | 无 |
-												Add expandIcon for Collapse (#14060)

close #14058 #12212
											
										
										
											2019-01-23 10:41:07 +08:00
+								| showArrow | 是否展示当前面板上的箭头 | boolean | `true` |
-												🌟 support extra for Collapse.Panel

close #11626

											
										
										
											2019-02-13 19:32:49 +08:00
+								| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - |
-												add collapsed faq
ref: #13953

											
										
										
											2018-12-27 19:41:15 +08:00
 								## FAQ
 								### 我希望箭头在右边，怎么做？
 								通过样式调整，将箭头放到右边就行啦：<https://codesandbox.io/s/vpm8qwo37>