百度智能小程序 折叠面板
collapse 折叠面板
解释：折叠面板，支持配置主标题文案和副标题文案，并可点击展开折叠面板查看更多内容。适用于信息展示，并可放置在页面的任何位置。
属性说明
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
|
headerType |
String |
否 |
'' |
折叠面板 header 布局类型，horizontal 水平布局、vertical 上下布局 |
|
spread |
Boolean |
否 |
false |
展开收起状态，展开为 true，收起为 false |
|
title |
String |
是 |
'' |
header 主标题文案 |
|
subTitle |
String |
否 |
'' |
header 否标题文案 |
|
list |
Array |
是 |
[] |
展开面板内容列表 |
|
headerBorder |
Boolean |
否 |
true |
是否展示下边框 |
|
animationTime |
Number |
否 |
0 |
折叠面板展开收起动画时长，单位 ms |
|
smt-header-title |
String |
否 |
提供扩展样式类，供开发者自定义组件样式。可通过此 class 修改主标题样式 |
|
|
smt-header-sub-title |
String |
否 |
提供扩展样式类，供开发者自定义组件样式。可通过此 class 修改副标题样式 |
|
|
smt-content-box |
String |
否 |
提供扩展样式类，供开发者自定义组件样式。可通过此 class 修改展开面板外层样式 |
|
|
smt-content-item |
String |
否 |
提供扩展样式类，供开发者自定义组件样式。可通过此 class 修改展开面板每一项的样式 |
|
|
spread |
Event |
展开收起触发事件， |
示例
代码示例
<smt-collapse
list="{{item.list}}"
title="{{item.title}}"
spread="{{item.spread}}"
sub-title="{{item.subTitle}}"
header-type="{{item.headerType}}"
animation-time="{{item.animationTime}}"
bind:spread="spread"
smt-header-title="smt-header-title"
smt-header-sub-title="smt-header-sub-title"
smt-content-box="smt-content-box"
smt-content-item="smt-content-item"
></smt-collapse>
Page({
data: {
item: {
title: '折叠面板列表',
subTitle: '展示文本信息',
headerType: 'horizontal',
spread: true,
animationTime: 380,
list: [
{
label: '标题一',
content: '内容文案'
},
{
label: '标题一',
content: '内容文案'
},
{
label: '标题一',
content: '内容文案'
}
]
}
},
spread(e) {
console.log(e.spread, '展开收起状态');
}
});.smt-header-title {
<!-- 可通过此 class 修改主标题样式 -->
}
.smt-header-sub-title {
<!-- 可通过此 class 修改副标题样式 -->
}
.smt-content-box {
<!-- 可通过此 class 修改展开面板外层样式 -->
}
.smt-content-item {
<!-- 可通过此 class 修改展开面板每一项的样式 -->
}
{
"navigationBarTitleText": "折叠面板",
"usingComponents": {
"smt-collapse": "@smt-ui/component/src/collapse"
}
}