百度智能小程序 折疊面板

collapse 折疊面板

解釋：折疊面板，支持配置主標(biāo)題文案和副標(biāo)題文案，并可點(diǎn)擊展開折疊面板查看更多內(nèi)容。適用于信息展示，并可放置在頁面的任何位置。

屬性說明

示例 

在開發(fā)者工具中打開

代碼示例

<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: '標(biāo)題一',
                    content: '內(nèi)容文案'
                },
                {
                    label: '標(biāo)題一',
                    content: '內(nèi)容文案'
                },
                {
                    label: '標(biāo)題一',
                    content: '內(nèi)容文案'
                }
            ]
        }
    },
    spread(e) {
        console.log(e.spread, '展開收起狀態(tài)');
    } 
});

.smt-header-title {
    <!-- 可通過此 class 修改主標(biāo)題樣式 -->
}

.smt-header-sub-title {
    <!-- 可通過此 class 修改副標(biāo)題樣式 -->
}

.smt-content-box {
    <!-- 可通過此 class 修改展開面板外層樣式 -->
}

.smt-content-item {
    <!-- 可通過此 class 修改展開面板每一項(xiàng)的樣式 -->
}

{
    "navigationBarTitleText": "折疊面板",
    "usingComponents": {
        "smt-collapse": "@smt-ui/component/src/collapse"
    }
}