antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
216 lines (186 loc) • 7.27 kB
Markdown
---
nav:
path: /components
group:
title: 数据展示
order: 8
toc: 'content'
---
可以折叠/展开的内容区域。
- 对复杂区域进行分组和隐藏，保持页面的整洁。
- 手风琴是一种特殊的折叠面板，只允许单个内容区域展开。
在 `index.json` 中引入组件
```json
"usingComponents": {
"ant-collapse": "antd-mini/es/Collapse/index"
"ant-collapse": "antd-mini/Collapse/index"
}
```
```xml
<ant-collapse
items="{{items}}"
onChange="onChange"
bindchange="onChange"
/>
```
```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
<ant-collapse
accordion="{{true}}"
items="{{items}}"
onChange="onChange"
bindchange="onChange"
/>
```
```xml
<ant-button
inline="{{true}}"
onTap="addItems"
bindtap="addItems"
>
添加items
</ant-button>
<ant-collapse
items="{{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],
});
},
});
```
```xml
<ant-collapse items="{{items}}">
<view
slot="title"
slot-scope="item"
class="title"
>
<view>
<ant-checkbox
data-index="{{item.index}}"
onChange="onChange"
/>
</view>
<view>{{item.value.title}}</view>
</view>
<view
slot="content"
slot-scope="item"
class="content">
{{item.value.content}}
</view>
</ant-collapse>
由于微信小程序平台的限制, Collapse 在微信暂时不支持 Slot
```
<code src='../../demo/pages/Collapse/index'></code>
| 属性 | 说明 | 类型 | 默认值 |
| ---------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------ | ------ |
| accordion | 是否是手风琴模式，仅一个内容被展开 | boolean | false |
| className | 类名 | string | - |
| content | 内容区插槽，接收 value、index | slot | - |
| current | 当前展开的索引 | number[] | - |
| defaultCurrent | 当前展开的默认索引 | number[] | [] |
| items | 折叠面板列表 | [CollapseItem](
| style | 样式 | string | - |
| title | 标题插槽，接收 value、index | slot | - |
|
|
| 属性 | 说明 | 类型 | 默认值 |
| --------- | -------- | ------- | ------ |
| content | 内容 | string | - |
| disabled | 是否禁用 | boolean | false |
| title | 标题 | string | - |
| className | 类名 | string | - |
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 变量名 | 默认值 | 深色模式默认值 | 备注 |
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | -------------------- | -------------------- |
| --collapse-title-background-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">
| --collapse-title-color | <div style="width: 150px; height: 30px; background-color: #333333; color: #ffffff;">
| --collapse-title-icon-color | <div style="width: 150px; height: 30px; background-color: #cccccc; color: #ffffff;">
| --collapse-content-background-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">
| --collapse-border-color | <div style="width: 150px; height: 30px; background-color: #eeeeee; color: #333333;">
| --collapse-node-text-color | <div style="width: 150px; height: 30px; background-color: #999999; color: #ffffff;">
| --collapse-container-background-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">