讲师中心 微信公众号
AI工具推荐 视频效率加速

MIP文档手册

浏览15337
更新时间2022-04-11

mip-accordion 用来支持在 mip折叠隐藏的节点(可记录用户上次行为)

QQ截图20170204113558.png

示例

标题加内容形式

<mip-accordion sessions-key="mip_1">
    <section>
        <h4>下拉第一个</h4>
        <p>我说你是人间的四月天;笑声点亮了四面风;轻灵在春的光艳中交舞着变。你是四月早天里的云烟,黄昏吹着风的软,星子在无意中闪,</p>
    </section>
    <section>
        <h4>下拉第二个</h4>
        <p>细雨点洒在花前。那轻,那娉婷,你是,鲜妍百花的冠冕你戴着,你是天真,庄严,你是夜夜的月圆。</p>
    </section>
    <section>
        <h4>下拉第三个</h4>
        <mip-img layout="responsive" width="400" height="200" src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"></mip-img>
    </section>
</mip-accordion>

标题加内容形式-手动

默认展开的节点此时要加 expanded 属性

<mip-accordion sessions-key="mip_1" type="manual">
    <section>
        <h4>下拉第一个</h4>
        <p>我说你是人间的四月天;笑声点亮了四面风;轻灵在春的光艳中交舞着变。你是四月早天里的云烟,黄昏吹着风的软,星子在无意中闪,</p>
    </section>
    <section  expanded>
        <h4>下拉第二个</h4>
        <p>细雨点洒在花前。那轻,那娉婷,你是,鲜妍百花的冠冕你戴着,你是天真,庄严,你是夜夜的月圆。</p>
    </section>
    <section>
        <h4>下拉第三个</h4>
        <mip-img layout="responsive" width="400" height="200" src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"></mip-img>
    </section>
</mip-accordion>

标题切换形式

<mip-accordion sessions-key="mip_2">
    <section>
        <h4>
          <span class="show-more">显示更多</span>
          <span class="show-less">收起</span>
          </h4>
        <p>显示显示收起收起显示显示收起收起显示显示收起收起显示显示收起收起</p>
      </section>
  </mip-accordion>

sessions-key

说明:组件唯一标识符,用于区分同个页面中多个mip-accordion以还原用户上次操作
必选项:是
类型:字符串

type

说明:类型,区分自动根据session记录展开节点(automatic),还是手动配置默认展开节点(manual)
必选项:否
类型:字符串
单位:无
取值:automatic, manual
默认值:automatic

expanded

说明:默认展开的 mip-accordion 子节点需要配置此属性,只有在 mip-accordion 的 type 属性值为 manual 时 才会生效
必选项:否
类型:字符串
单位:无
取值:无
默认值:无

精品课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时 | 64.9万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时 | 41.2万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时 | 76.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn