mip-accordion 折疊節點


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 時才會生效
必選項:否
類型:字串
單位:無
取值:無
預設值:無