---
nav:
path: /components
group:
title: 数据展示
order: 8
toc: 'content'
---
# Collapse 折叠面板
可以折叠/展开的内容区域。
- 对复杂区域进行分组和隐藏，保持页面的整洁。
- 手风琴是一种特殊的折叠面板，只允许单个内容区域展开。
## 引入
在 `index.json` 中引入组件
```json
"usingComponents": {
#if ALIPAY
"ant-collapse": "antd-mini/es/Collapse/index"
#endif
#if WECHAT
"ant-collapse": "antd-mini/Collapse/index"
#endif
}
```
## 代码示例
### Demo 代码
```xml
```
```js
Page({
data: {
items: [
{
title: 'item1 title',
content: 'item1 content',
},
{
title: 'item2 title',
content: 'item2 content',
},
{
title: 'item3 title',
content: 'item3 content',
},
],
},
onChange(current) {
console.log(current);
},
});
```
### 手风琴模式
```xml
```
### 列表项控制
```xml
添加items
```
```js
Page({
data: {
items: [
{
title: 'item1 title',
content: 'item1 content',
},
{
title: 'item2 title',
content: 'item2 content',
},
{
title: 'item3 title',
content: 'item3 content',
},
],
},
addItems() {
const items = [
...this.data.items,
{
title: this.data.items.length,
content: 'dynamic item content',
},
];
this.setData({
items,
current: [this.data.items.length],
});
},
});
```
### 带 Checkbox
```xml
#if ALIPAY
{{item.value.title}}
{{item.value.content}}
#endif
#if WECHAT
由于微信小程序平台的限制, Collapse 在微信暂时不支持 Slot
#endif
```
### Demo 代码
#ffffff
| #1a1a1a
| 折叠面板标题背景颜色 |
| --collapse-title-color | #333333
| #c5cad1
| 折叠面板标题颜色 |
| --collapse-title-icon-color | #cccccc
| #474747
| 折叠面板标题图标颜色 |
| --collapse-content-background-color | #ffffff
| #1a1a1a
| 折叠面板内容背景颜色 |
| --collapse-border-color | #eeeeee
| #2b2b2b
| 折叠面板边框颜色 |
| --collapse-node-text-color | #999999
| #616161
| 折叠面板节点文本颜色 |
| --collapse-container-background-color | #ffffff
| #1a1a1a
| 折叠面板容器背景颜色 |