• collapse 折叠面板
  • 属性说明
  • 示例
    • 代码示例 1：默认
    • 代码示例 2：使用 slot

collapse 折叠面板

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

属性说明

示例

跳转编辑工具

在开发者工具中打开

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