加入官方微信群

使用微信扫描二维码
或搜索 weweloo 添加微信好友

返回
MooKwai特色块折叠面板

折叠面板

折叠面板(Collapse 手风琴)可点击触发内容的展开与收起效果。

文章目录

区块

折叠面板由折叠面板区块与折叠元素区块共同组成

  • 折叠面板:内部可插入一个或多个折叠元素
    • 折叠元素:内部可插入任何其他类型的区块

内容

折叠面板插入折叠面板元素,折叠面板元素又由头部与内容面板两部分组成,头部可设置标题文字,图标等内容。内容面板中可插入其他类型的区块。

配置选项

全局样式

Select 选择区块对应的全局样式。

标题Html标签

Select 设置折叠元素的头部文字内容标签。

图标(展开)

Select 设置面板展开状态时显示的图标。

图标(收起)

Select 设置面板收起状态时显示的图标。

交互状态

初始状态

Select 设置页面打开时组件的默认状态。

自动收起

Boolean 展开一个面板时,自动收起其他的面板。

持续时长

Number 面板动画的持续时间,单位为秒。0 ~ 100 之间的任意数值,整数或浮点数。

延时

Number 面板动画播放前的延迟时间,单位为秒。0 ~ 100 之间的任意数值,整数或浮点数。

动画曲线

Select 面板动画的加速度曲线。

自定义曲线

String 自定义曲线函数,为 GSAP 动画曲线,设置方式可参考 GSAP Eases Docs

元素

// 折叠面板区块
<div class="mk-collapse">
  // 折叠元素区块
  <div class="mk-collapse-item expanded">
    <div class="el-head" aria-expanded="true">
      <h4>...标题文字</h4>
      <span class="toggle-icon">
        <span class="icon fold-icon">...图标</span>
        <span class="icon expand-icon">...图标</span>
      </span>
    </div>
    <div class="el-body" aria-expanded="true">
      <div class="inner-wrap">...内部区块</div>
    </div>
  </div>
  // 折叠元素区块
  <div class="mk-collapse-item">
    <div class="el-head" aria-expanded="false">
      <h4>...标题文字</h4>
      <span class="toggle-icon">
        <span class="icon fold-icon">...图标</span>
        <span class="icon expand-icon">...图标</span>
      </span>
    </div>
    <div class="el-body" aria-expanded="false">
      <div class="inner-wrap">...内部区块</div>
    </div>
  </div>
  // 折叠元素区块
  <div class="mk-collapse-item">
    <div class="el-head" aria-expanded="false">
      <h4>...标题文字</h4>
      <span class="toggle-icon">
        <span class="icon fold-icon">...图标</span>
        <span class="icon expand-icon">...图标</span>
      </span>
    </div>
    <div class="el-body" aria-expanded="false">
      <div class="inner-wrap">...内部区块</div>
    </div>
  </div>
</div>
  • 主容器 .mk-collapse
  • 元素 .mk-collapse-item
  • 头部 .el-head
  • 主体 .el-body

其他

使用微信扫描二维码
或搜索 weweloo 添加微信好友

加微信
进群聊聊(๑•̀ㅂ•́) ✧