Collapse
折叠面板

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

使用import { Collapse } from "antd";

文档

何时使用

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

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

代码演示

This is panel header 1

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.

This is panel header 2

This is panel header 3

折叠面板

可以同时展开多个面板，这个例子默认展开了第一个。

Default Size

This is default size panel header

Small Size

This is small size panel header

Large Size

This is large size panel header

面板尺寸

折叠面板有大、中、小三种尺寸。

通过设置 size 为 large small 分别把折叠面板设为大、小尺寸。若不设置 size，则尺寸默认为中。

This is panel header 1

This is panel header 2

This is panel header 3

手风琴

手风琴模式，始终只有一个面板处在激活状态。

This is panel header 1

This is panel header 2

This is panel header 3

面板嵌套

嵌套折叠面板。

This is panel header 1

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.

This is panel header 2

This is panel header 3

简洁风格

一套没有边框的简洁样式。

This is panel header 1

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.

This is panel header 2

This is panel header 3

自定义面板

自定义各个面板的背景色、圆角、边距和图标。

This is panel header with arrow icon

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.

This is panel header with no arrow icon

隐藏箭头

你可以通过 showArrow={false} 隐藏 CollapsePanel 组件的箭头图标。

This is panel header 1

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.

This is panel header 2

This is panel header 3

Expand Icon Position:

start

额外节点

自定义渲染每个面板右上角的内容。

This is panel header 1

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.

This is panel header 2

This is panel header 3

幽灵折叠面板

将折叠面板的背景变成透明。

This panel can only be collapsed by clicking 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.

This panel can only be collapsed by clicking icon

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.

This panel can't be collapsed

可折叠触发区域

通过 collapsible 属性，可以设置面板的可折叠触发区域。

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

已废弃

版本 >= 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

This is panel header

This is panel body

header
5.21.0
头部元素
body
5.21.0
内容元素

主题变量（Design Token）

组件 Token如何定制？

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如何定制？

何时使用

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

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

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

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
折叠面板

Ant Design

Collapse
折叠面板

何时使用

代码演示

API

Collapse

ItemType

Collapse.Panel

Semantic DOM

header

body

主题变量（Design Token）

何时使用

代码演示

API

Collapse

ItemType

Collapse.Panel

Semantic DOM

header

body

主题变量（Design Token）

Collapse折叠面板

Collapse折叠面板

何时使用

代码演示

API

Collapse

ItemType

Collapse.Panel

Semantic DOM

header

body

主题变量（Design Token）

何时使用

代码演示

API

Collapse

ItemType

Collapse.Panel

Semantic DOM

header

body

主题变量（Design Token）

Collapse
折叠面板

Collapse
折叠面板