Collapse
折叠面板

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

使用import { Collapse } from "antd";

源码components/collapse

文档

编辑此页更新日志

何时使用

对复杂区域进行分组和隐藏，保持页面的整洁。

手风琴 是一种特殊的折叠面板，只允许单个内容区域展开。

tsx

// >= 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>;

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.

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
destroyOnHidden	销毁折叠隐藏的面板	boolean	false	5.25.0
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

参数	说明	类型	默认值	版本
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

参数

说明

类型

默认值

版本

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

Token 名称	描述	类型	默认值
borderlessContentBg	简约风格折叠面板的内容背景	string	transparent
borderlessContentPadding	简约风格折叠面板的内容内边距	undefined \| Padding<string \| number>	4px 16px 16px
contentBg	折叠面板内容背景	string	#ffffff
contentPadding	折叠面板内容内边距	undefined \| Padding<string \| number>	16px 16px
headerBg	折叠面板头部背景	string	rgba(0,0,0,0.02)
headerPadding	折叠面板头部内边距	undefined \| Padding<string \| number>	12px 16px

Token 名称

描述

类型

默认值

borderlessContentBg

简约风格折叠面板的内容背景

string

transparent

borderlessContentPadding

简约风格折叠面板的内容内边距

undefined | Padding<string | number>

4px 16px 16px

contentBg

折叠面板内容背景

string

#ffffff

contentPadding

折叠面板内容内边距

undefined | Padding<string | number>

16px 16px

headerBg

折叠面板头部背景

string

rgba(0,0,0,0.02)

headerPadding

折叠面板头部内边距

undefined | Padding<string | number>

12px 16px

Ant Design

Collapse
折叠面板

何时使用

代码演示

API

Collapse

ItemType

Collapse.Panel

Semantic DOM

header

body

主题变量（Design Token）

Collapse折叠面板

何时使用

代码演示

API

Collapse

ItemType

Collapse.Panel

Semantic DOM

header

body

主题变量（Design Token）

Collapse
折叠面板