支付宝小程序扩展组件 折叠面板·Collapse
2020-09-18 11:20 更新
可以折叠 / 展开的内容区域。
- 对复杂区域进行分组和隐藏,保持页面的整洁;
- 手风琴模式 是一种特殊的折叠面板,只允许单个内容区域展开。
扫码体验
示例代码
{
"defaultTitle": "Collapse",
"usingComponents": {
"collapse": "mini-ali-ui/es/collapse/index",
"collapse-item": "mini-ali-ui/es/collapse/collapse-item/index"
}
}
<view>
<view class="demo-title">基础用法</view>
<collapse
className="demo-collapse"
collapseKey="collapse1"
activeKey="{{['item-11', 'item-13']}}"
onChange="onChange"
>
<collapse-item header="标题1" itemKey="item-11" collapseKey="collapse1">
<view class="item-content">
<block a:for="{{randomLine}}">
<view>自适应高度的内容区域 共 {{index + 1}} 行</view>
</block>
</view>
</collapse-item>
<collapse-item header="标题2" itemKey="item-12" collapseKey="collapse1">
<view class="item-content content2">
<view>内容区域</view>
</view>
</collapse-item>
<collapse-item header="标题3" itemKey="item-13" collapseKey="collapse1">
<view class="item-content content3">
<view>内容区域</view>
</view>
</collapse-item>
</collapse>
<view class="demo-title">手风琴模式</view>
<collapse
className="demo-collapse"
collapseKey="collapse2"
activeKey="{{['item-21', 'item-23']}}"
onChange="onChange"
accordion="{{true}}"
>
<collapse-item header="标题1" itemKey="item-21" collapseKey="collapse2">
<view class="item-content">
<block a:for="{{randomLine}}">
<view>自适应高度的内容区域 共 {{index + 1}} 行</view>
</block>
</view>
</collapse-item>
<collapse-item header="标题2" itemKey="item-22" collapseKey="collapse2">
<view class="item-content content2">
<view>内容区域</view>
</view>
</collapse-item>
<collapse-item header="标题3" itemKey="item-23" collapseKey="collapse2">
<view class="item-content content3">
<view>内容区域</view>
</view>
</collapse-item>
</collapse>
</view>
.item-content {
padding: 14px 16px;
font-size: 17px;
color: #333;
line-height: 24px;
}
.content1 {
height: 200px;
}
属性
Collapse 折叠面板主要是有 <collapse>
和 <collapse-item>
两部分组成,所以,属性也有所不同。
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
className | String | - | 自定义 class。 |
activeKey | Array / String | 默认无,accordion模式下默认第一个元素 | 当前激活 tab 面板的 key。 |
onChange | EventHandle | (activeKeys: Array): void | 切换面板的回调。 |
accordion | Boolean | false | 是否为手风琴模式。 |
collapseKey | String | - | 唯一标示 collapse 和对应的 collapse-item。 |
collapse-item
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
className | String | - | 自定义 class。 |
titleClass | String | - | 自定义标题的 class。 |
contentClass | String | - | 自定义内容区域的 class。 |
isOpen | Boolean | false | 面板内容是否展开。 |
showArrow | Boolean | true | 是否显示箭头。 |
itemKey | String | - | 对应 activeKey,组件唯一标识。。 |
header | String | - | 面板头内容。 |
collapseKey | String | - | 唯一标识 collapse-item 所对应的 collapse。 |
disabled | Boolean | true | 当前面板是否可点击使用。 |
Bug & Tip
- 当页面中存在多个 collapse 组件时,collapse 所对应的 collapse-item 的 collapseKey 属性为必选值并且必须相等;
- 当页面中只有一个 collapse 组件时,collapseKey 不需要提供;
- 如 accordion 为 true 时,activeKey 传值仅为字符串,如果传数组将导致取值错误,展示默认的第一个;
以上内容是否对您有帮助:
更多建议: