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	否		展开收起触发事件，`e.spread`展开收起状态

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：默认

SWAN
JS
CSS
JSON

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

代码示例 2：使用 slot

SWAN
JS
CSS
JSON

<smt-collapse
    spread="{{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>