Collapse
折叠面板

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

何时使用

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

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

手风琴

手风琴，每次只打开一个 tab。

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	默认无，accordion 模式下默认第一个元素
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

Collapse.Panel

>= 5.6.0 请使用 items 方式配置面板.

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

Design Token

全局 Token

何时使用

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

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

// >= 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	默认无，accordion 模式下默认第一个元素
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

Collapse.Panel

参数

说明

类型

默认值

版本

collapsible

是否可折叠或指定可折叠触发区域

header | icon | disabled

4.9.0 (icon: 4.24.0)

extra

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

ReactNode

forceRender

被隐藏时是否渲染 DOM 结构

boolean

false

header

面板头内容

ReactNode

key

对应 activeKey

string | number

showArrow

是否展示当前面板上的箭头（为 false 时，collapsible 不能置为 icon）

boolean

true

Namu Design

Collapse
折叠面板

Namu Design

Collapse
折叠面板

何时使用

代码演示

API

Collapse

Collapse.Panel

Design Token

全局 Token

何时使用

代码演示

API

Collapse

Collapse.Panel

Design Token

全局 Token

Collapse折叠面板更新日志

Collapse折叠面板更新日志

何时使用

代码演示

API

Collapse

Collapse.Panel

Design Token

全局 Token

何时使用

代码演示

API

Collapse

Collapse.Panel

Design Token

全局 Token

Collapse
折叠面板

Collapse
折叠面板