百度智能小程序 折叠面板

collapse 折叠面板

解释：折叠面板，支持配置主标题文案和副标题文案，并可点击展开折叠面板查看更多内容。适用于信息展示，并可放置在页面的任何位置。

属性说明

示例 

在开发者工具中打开

代码示例

<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"
    }
}