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

category	group	title	subtitle	description	cover	coverDark
Components	数据展示	Collapse	折叠面板	可以折叠/展开的内容区域。	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*B7HKR5OBe8gAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sir-TK0HkWcAAAAAAAAAAAAADrJ8AQ/original

何时使用

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

// >= 5.6.0 可用，推荐的写法 ✅
const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

const items: CollapseProps['items'] = [
  {
    key: '1',
    label: 'This is panel header 1',
    children: <p>{text}</p>,
  },
  {
    key: '2',
    label: 'This is panel header 2',
    children: <p>{text}</p>,
  },
  {
    key: '3',
    label: 'This is panel header 3',
    children: <p>{text}</p>,
  },
];

<Collapse items={items} defaultActiveKey={['1']} />;

// <5.6.0 可用，>=5.6.0 时不推荐 🙅🏻‍♀️

<Collapse defaultActiveKey={['1']} onChange={onChange}>
  <Panel header="This is panel header 1" key="1">
    <p>{text}</p>
  </Panel>
  <Panel header="This is panel header 2" key="2">
    <p>{text}</p>
  </Panel>
  <Panel header="This is panel header 3" key="3">
    <p>{text}</p>
  </Panel>
</Collapse>;

代码演示

折叠面板 面板尺寸 手风琴 面板嵌套 简洁风格 自定义面板 隐藏箭头 额外节点 幽灵折叠面板 可折叠触发区域 组件 Token

API

通用属性参考：通用属性

Collapse

参数	说明	类型	默认值	版本
accordion	手风琴模式	boolean	false
activeKey	当前激活 tab 面板的 key	string[] | string number[] | number	手风琴模式下默认第一个元素
bordered	带边框风格的折叠面板	boolean	true
collapsible	所有子面板是否可折叠或指定可折叠触发区域	header | icon | disabled	-	4.9.0
defaultActiveKey	初始化选中面板的 key	string[] | string number[] | number	-
destroyInactivePanel	销毁折叠隐藏的面板	boolean	false
expandIcon	自定义切换图标	(panelProps) => ReactNode	-
expandIconPosition	设置图标位置	start | end	-	4.21.0
ghost	使折叠面板透明且无边框	boolean	false	4.4.0
size	设置折叠面板大小	large | middle | small	middle	5.2.0
onChange	切换面板的回调	function	-
items	折叠项目内容	ItemType	-	5.6.0

ItemType

参数	说明	类型	默认值	版本
classNames	语义化结构 className	Record<header | body, string>	-	5.21.0
collapsible	是否可折叠或指定可折叠触发区域	header | icon | disabled	-
children	body 区域内容	ReactNode	-
extra	自定义渲染每个面板右上角的内容	ReactNode	-
forceRender	被隐藏时是否渲染 body 区域 DOM 结构	boolean	false
key	对应 activeKey	string | number	-
label	面板标题	ReactNode	-	-
showArrow	是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon）	boolean	true
styles	语义化结构 style	Record<header | body, CSSProperties>	-	5.21.0

Collapse.Panel

:::info{title=已废弃} 版本 >= 5.6.0 时请使用 items 方式配置面板。 :::

参数	说明	类型	默认值	版本
collapsible	是否可折叠或指定可折叠触发区域	header | icon | disabled	-	4.9.0 (icon: 4.24.0)
extra	自定义渲染每个面板右上角的内容	ReactNode	-
forceRender	被隐藏时是否渲染 body 区域 DOM 结构	boolean	false
header	面板标题	ReactNode	-
key	对应 activeKey	string | number	-
showArrow	是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon）	boolean	true

Semantic DOM

主题变量（Design Token）