- collapse 折叠面板
- 属性说明
- 示例
- 代码示例 1：默认
- 代码示例 2：使用 slot
collapse 折叠面板
解释：折叠面板，支持配置主标题文案和副标题文案，并可点击展开折叠面板查看更多内容。适用于信息展示，并可放置在页面的任何位置。
属性说明
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
|
headerType |
String |
否 |
vertical |
折叠面板 header 布局类型，horizontal 水平布局、vertical 上下布局 |
|
spread |
Boolean |
否 |
false |
展开收起状态，展开为 true，收起为 false |
|
onlySpreadByIcon |
Boolean |
否 |
false |
展开收起事件，是否仅绑定在icon上（是：true，否：false） |
|
title |
String |
是 |
header 主标题文案 |
|
|
subTitle |
String |
否 |
‘’ |
header 否标题文案 |
|
list |
Array |
是 |
展开面板内容列表 |
|
|
headerBorder |
Boolean |
否 |
true |
是否展示下边框 |
|
animationTime |
Number |
否 |
0 |
折叠面板展开收起动画时长（单位：ms） |
|
spreadHeight |
String |
否 |
1rpx |
收起时内容区的高度（单位：rpx） |
|
smt-collapse-header |
String |
否 |
提供扩展样式类，供开发者自定义组件样式。可通过此 class 修改header外层样式 |
|
|
smt-header-title |
String |
否 |
提供扩展样式类，供开发者自定义组件样式。可通过此 class 修改主标题样式 |
|
|
smt-header-sub-title |
String |
否 |
提供扩展样式类，供开发者自定义组件样式。可通过此 class 修改副标题样式 |
|
|
smt-content-box |
String |
否 |
提供扩展样式类，供开发者自定义组件样式。可通过此 class 修改展开面板外层样式 |
|
|
smt-content-item |
String |
否 |
提供扩展样式类，供开发者自定义组件样式。可通过此 class 修改展开面板每一项的样式 |
|
|
spread |
EventHandle |
否 |
展开收起触发事件， |
示例
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
代码示例 1：默认
- SWAN
- JS
- CSS
- JSON
<smt-collapselist="{{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>
代码示例 2：使用 slot
- SWAN
- JS
- CSS
- JSON
<smt-collapsespread="{{slot.spread}}"spread-height="{{slot.spreadHeight}}"header-type="{{slot.headerType}}"animation-time="{{slot.animationTime}}"bind:spread="spread"><view slot="header">插槽内容</view><view slot="content" class="check-box"><view class="check-box-item" s-for="{{slot.checkBoxlist}}">{{item.label}}</view></view></smt-collapse>
