创新互联百度小程序教程:collapse折叠面板

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

    collapse 折叠面板

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

    10年积累的网站制作、网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计制作后付款的网站建设流程,更有峨边彝族免费网站建设让你可以放心的选择与我们合作。

    属性说明

    属性名 类型 必填 默认值 说明

    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
     
     
     
    1. list="{{item.list}}"
    2. title="{{item.title}}"
    3. spread="{{item.spread}}"
    4. sub-title="{{item.subTitle}}"
    5. header-type="{{item.headerType}}"
    6. animation-time="{{item.animationTime}}"
    7. bind:spread="spread"
    8. smt-header-title="smt-header-title"
    9. smt-header-sub-title="smt-header-sub-title"
    10. smt-content-box="smt-content-box"
    11. smt-content-item="smt-content-item"
    12. >

    代码示例 2:使用 slot

    • SWAN
    • JS
    • CSS
    • JSON
     
     
     
    1. spread="{{slot.spread}}"
    2. spread-height="{{slot.spreadHeight}}"
    3. header-type="{{slot.headerType}}"
    4. animation-time="{{slot.animationTime}}"
    5. bind:spread="spread"
    6. >
    7. 插槽内容
    8. {{item.label}}

    当前文章:创新互联百度小程序教程:collapse折叠面板
    浏览地址:http://www.mswzjz.com/qtweb/news2/197652.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联