建站
咨詢
售后
建站咨詢
新聞中心
- collapse 折疊面板
- 屬性說明
- 示例
- 代碼示例 1：默認(rèn)
- 代碼示例 2：使用 slot
collapse 折疊面板
解釋：折疊面板，支持配置主標(biāo)題文案和副標(biāo)題文案，并可點擊展開折疊面板查看更多內(nèi)容。適用于信息展示，并可放置在頁面的任何位置。
10年積累的網(wǎng)站制作、網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計制作后付款的網(wǎng)站建設(shè)流程，更有峨邊彝族免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
屬性說明
| 屬性名 | 類型 | 必填 | 默認(rèn)值 | 說明 |
|---|---|---|---|---|
|
headerType |
String |
否 |
vertical |
折疊面板 header 布局類型，horizontal 水平布局、vertical 上下布局 |
|
spread |
Boolean |
否 |
false |
展開收起狀態(tài)，展開為 true，收起為 false |
|
onlySpreadByIcon |
Boolean |
否 |
false |
展開收起事件，是否僅綁定在icon上（是：true，否：false） |
|
title |
String |
是 |
header 主標(biāo)題文案 |
|
|
subTitle |
String |
否 |
‘’ |
header 否標(biāo)題文案 |
|
list |
Array |
是 |
展開面板內(nèi)容列表 |
|
|
headerBorder |
Boolean |
否 |
true |
是否展示下邊框 |
|
animationTime |
Number |
否 |
0 |
折疊面板展開收起動畫時長（單位：ms） |
|
spreadHeight |
String |
否 |
1rpx |
收起時內(nèi)容區(qū)的高度（單位：rpx） |
|
smt-collapse-header |
String |
否 |
提供擴(kuò)展樣式類，供開發(fā)者自定義組件樣式。可通過此 class 修改header外層樣式 |
|
|
smt-header-title |
String |
否 |
提供擴(kuò)展樣式類，供開發(fā)者自定義組件樣式?？赏ㄟ^此 class 修改主標(biāo)題樣式 |
|
|
smt-header-sub-title |
String |
否 |
提供擴(kuò)展樣式類，供開發(fā)者自定義組件樣式?？赏ㄟ^此 class 修改副標(biāo)題樣式 |
|
|
smt-content-box |
String |
否 |
提供擴(kuò)展樣式類，供開發(fā)者自定義組件樣式。可通過此 class 修改展開面板外層樣式 |
|
|
smt-content-item |
String |
否 |
提供擴(kuò)展樣式類，供開發(fā)者自定義組件樣式。可通過此 class 修改展開面板每一項的樣式 |
|
|
spread |
EventHandle |
否 |
展開收起觸發(fā)事件， |
示例
跳轉(zhuǎn)編輯工具
在開發(fā)者工具中打開
在 WEB IDE 中打開
掃碼體驗
代碼示例
請使用百度APP掃碼
代碼示例 1：默認(rèn)
- SWAN
- JS
- CSS
- JSON
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">
代碼示例 2：使用 slot
- SWAN
- JS
- CSS
- JSON
spread="{{slot.spread}}"spread-height="{{slot.spreadHeight}}"header-type="{{slot.headerType}}"animation-time="{{slot.animationTime}}"bind:spread="spread">插槽內(nèi)容 {{item.label}}
網(wǎng)頁名稱：創(chuàng)新互聯(lián)百度小程序教程：collapse折疊面板
當(dāng)前URL：http://www.5511xx.com/article/cdsgccs.html
