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

---
category: Components
type: 数据展示
title: Collapse
subtitle: 折叠面板
cols: 1
cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
---

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

## 何时使用

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

## API

### Collapse

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

### Collapse.Panel

| 参数        | 说明                                       | 类型              | 默认值 | 版本 |
| ----------- | ------------------------------------------ | ----------------- | ------ | ---- |
| disabled    | 禁用后的面板展开与否将无法通过用户交互改变 | boolean           | false  |      |
| forceRender | 被隐藏时是否渲染 DOM 结构                  | boolean           | false  |      |
| header      | 面板头内容                                 | string\|ReactNode | 无     |      |
| key         | 对应 activeKey                             | string\|number    | 无     |      |
| showArrow   | 是否展示当前面板上的箭头                   | boolean           | `true` |      |
| extra       | 自定义渲染每个面板右上角的内容             | ReactNode         | -      |      |
-												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: 🌈 Add Components overview page (#24491)

* docs: Add components overview page

* fix detail

* remove ContributorsList form overview page

* fix components url

* improve code style

* remove extra file

* fix detail

* fix lint

* fix lint

* docs: Finish components overview page

* fix lint

* docs: Update cover

* fix lint

* update cover

* update menu

* improve overview page

* refactor code

* fix order

* update title

* add components count

* fix overview page ssr bug

* move less file

* update title margin

Co-authored-by: arvinxx <arvinx@foxmail.com>
											
										
										
											2020-05-31 11:48:34 +08:00
+								cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
-												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
-												meger feature to master (#16421)

* use ul in list

* update snapshot

* update comment

* feat: TreeSelect support `showSearch` in multiple mode (#15933)

* update rc-tree-select

* typo

* update desc & snapshot

* update desc & snapshot

* check default showSearch

* feat: table customizing variable (#15971)

* feat: added table selected row color variable

* fix: @table-selected-row-color default is inherit

* feat: Upload support customize previewFile (#15984)

* support preview file

* use promise

* dealy load

* use canvas of render

* use domHook of test

* update demo

* add snapshot

* update types

* update testcase

* feat: form customizing variables (#15954)

* fix: added styling form input background-color

* feat: added '@form-warning-input-bg' variable

* feat: added '@form-error-input-bg' variable

* use li wrap with comment

* feat: Support append theme less file with less-variable (#16118)

* add override

* add override support

* update doc

* feat: dropdown support set right icon

* docs: update doc of dropdown component

* style: format dropdown-button.md

* test: update updateSnapshot

* style: format dropdown-button.md

* test: update updateSnapshot

* test: update updateSnapshot

* style: change style of dropdown-button demo

* fix: fix document table order

* feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128)

* chore:update style of demo

* feat: Notification functions accept top, bottom and getContainer as arguments

* drawer: add afterVisibleChange

* rm onVisibleChange

* update

* feat: 🇭🇷 hr_HR locale (#16258)

* Added Croatian locale

* fixed lint error

* :white_check_mark: Add test cases for hr_HR

* :memo: update i18n documentation

* feat:  add `htmlFor` in Form.Item (#16278)

* add htmlFor in Form.Item

* update doc

* feat: Button support `link` type (#16289)

close #15892

* feat: Add Timeline.Item.position (#16148) (#16193)

* fix: Timeline.pendingDot interface documentation there is a small problem (#16177)

* feat: Add Timeline.Item.position (#16148)

* doc: add version infomation for Timeline.Item.position

* refactor: Update Tree & TreeSelect deps (#16330)

* use CSSMotion

* update snapshot

* feat: Collapse support `expandIconPosition` (#16365)

* update doc

* support expandIconPosition

* update snapshot

* feat: Breadcrumb  support DropDown (#16315)

* breadcrumbs support drop down menu

* update doc

* add require less

* fix test

* fix md doc

* less code

* fix  style warning

* update snap

* add children render test

* feat: TreeNode support checkable

* feat: add optional to support top and left slick dots (#16186) (#16225)

* add optional to support top and left slick dots

* update carousel snapshot

* Update doc, add placement demo

* update carousel placement demo snapshots

* rename dots placement to position

* update vertical as deprecated

* rename dotsPosition to dotPosition

* refine code

* add warning testcase for vertical

* remove unused warning

* update expression

* Additional test case for dotPosition

* refactor: Upgrade `rc-tree-select` to support pure React motion (#16402)

* upgrade `rc-tree-select`

* update snapshot

* 3.17.0 changelog

* fix warning

* fix review warning

											
										
										
											2019-05-06 12:04:39 +08:00
+								| 参数 | 说明 | 类型 | 默认值 | 版本 |
 								| --- | --- | --- | --- | --- |
-												Fix Collapse Panel key type. (#17557)


											
										
										
											2019-07-13 10:31:56 +08:00
+								| activeKey | 当前激活 tab 面板的 key | string\[]\|string\| number\[]\|number | 默认无，accordion 模式下默认第一个元素 |  |
 								| defaultActiveKey | 初始化选中面板的 key | string\[]\|string\| number\[]\|number | 无 |  |
-												docs(update): removed 3.x version description in 4.0-prepare (#19827)

* docs(update): removed 3.x version description in 4.0-prepare

ref #19815

* docs(update): update docs

remove carousel/index.zh-CN.md empty version column

* docs(update): update docs

remove carousel/index.en-US.md empty version column

											
										
										
											2019-11-20 20:31:43 +08:00
+								| bordered | 带边框风格的折叠面板 | boolean | `true` |  |
 								| accordion | 手风琴模式 | boolean | `false` |  |
-												:lipstick: prittier all files

											
										
										
											2019-05-07 14:57:32 +08:00
+								| onChange | 切换面板的回调 | Function | 无 |  |
-												docs(update): removed 3.x version description in 4.0-prepare (#19827)

* docs(update): removed 3.x version description in 4.0-prepare

ref #19815

* docs(update): update docs

remove carousel/index.zh-CN.md empty version column

* docs(update): update docs

remove carousel/index.en-US.md empty version column

											
										
										
											2019-11-20 20:31:43 +08:00
+								| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - |  |
-												docs: Format string notation of all components (#20970)


											
										
										
											2020-01-17 17:23:48 +08:00
+								| expandIconPosition | 设置图标位置 | `left` \| `right` | - |  |
-												docs(update): removed 3.x version description in 4.0-prepare (#19827)

* docs(update): removed 3.x version description in 4.0-prepare

ref #19815

* docs(update): update docs

remove carousel/index.zh-CN.md empty version column

* docs(update): update docs

remove carousel/index.en-US.md empty version column

											
										
										
											2019-11-20 20:31:43 +08:00
+								| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` |  |
-												feat: add ghost prop for collapse (#24734)

* feat: add ghost prop for collapse

* doc: version of collapse's ghost prop

* refactor: make ghost collapse's less code to a nested style

* chore: remove redundant codes in ghost collapse's less & doc

* doc: add a background wrapper for ghost collapse demo

* doc: dark-theme wrapper bg-color for ghost collapse demo

* test: update snapshot of ghost collapse

* doc: use softer bg-color on ghost collapse demo

* doc: remove disabled panel in ghost collapse demo
											
										
										
											2020-06-05 13:42:46 +08:00
+								| ghost | 使折叠面板透明且无边框 | boolean | `false` | 4.4.0 |
-												feat: add component collapse

											
										
										
											2015-07-11 10:17:58 +08:00
 								### Collapse.Panel
-												docs(update): removed 3.x version description in 4.0-prepare (#19827)

* docs(update): removed 3.x version description in 4.0-prepare

ref #19815

* docs(update): update docs

remove carousel/index.zh-CN.md empty version column

* docs(update): update docs

remove carousel/index.en-US.md empty version column

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