折叠面板

区块

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

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

内容

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

配置选项

全局样式

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

其他