mip-vd-tabs tab切換組件

mip-vd-tabs 用來支援網頁中標籤頁的顯示。標籤頁內元素較多時不建議使用,會影響頁面效能.

#範例

一共支援5種樣式

等分固定標籤頁

<mip-vd-tabs>
    <section>
        <li>第一页</li>
        <li>第二页</li>
        <li>第三页</li>
        <li>第四页</li>
    </section>
    <div>内容1</div>
    <div>内容2</div>
    <div>内容3</div>
    <div>内容4</div>
</mip-vd-tabs>

橫滑標籤頁

<mip-vd-tabs allow-scroll>
    <section>
        <li>第一季</li>
        <li>第二季</li>
        <li>第三季</li>
        <li>第四季</li>
        <li>第五季</li>
        <li>第六季更新至09</li>
    </section>
    <div>内容1</div>
    <div>内容2</div>
    <div>内容3</div>
    <div>内容4</div>
    <div>内容5</div>
    <div>内容6</div>
</mip-vd-tabs>

帶下拉按鈕的橫滑標籤頁

<mip-vd-tabs allow-scroll toggle-more toggle-label="自定义文字">
    <section>
        <li>第一季</li>
        <li>第二季</li>
        <li>第三季</li>
        <li>第四季更新至09</li>
    </section>
    <div>内容1</div>
    <div>内容2</div>
    <div>内容3</div>
    <div>内容4</div>
</mip-vd-tabs>

底部標籤頁

<mip-vd-tabs allow-scroll type="bottom" current="3">
    <div>内容1</div>
    <div>内容2</div>
    <div>内容3</div>
    <div>内容4</div>
    <section>
        <li>第一季</li>
        <li>第二季</li>
        <li>第三季</li>
        <li>第四季更新至09</li>
    </section>
</mip-vd-tabs>

劇情展開標籤頁

<mip-vd-tabs
    type="episode"
    toggle-more
    toggle-label="老九门剧情选集"
    allow-scroll
    total="23"
    current="11"
    text-tpl="看第{{x}}集"
    link-tpl="http://www.baidu.com/{{x}}/juji">
</mip-vd-tabs>

屬性

type

說明：一共有三種特型, bottom(底部選項卡), episode(劇情選項卡), 不填則為預設特型
必填項：否

allow-scroll

說明：允許滑動
#必填：否

toggle-more

說明：是否顯示下拉按鈕.前依賴allow-scroll屬性
必填項：否

toggle-label

說明：下拉說明文字. 前置依賴toggle -more屬性
必填項：否

current

說明：目前已選取標籤頁, 從0開始計數(current="3"表示第4個標籤頁).當type="episode"時,表示目前集數,從1開始計數(current="4"表示第4集),預設為1.
必填項：否

total

說明：集數總數. 前置依賴type="episode",並且當type="episode"為必填
必填項：否

##page-size

說明：每頁顯示劇集數. 前置依賴type="episode",預設為50

必填項：否

text-tpl

說明：顯示在標籤頁上的劇集文案, "第{{x}}集"裡的"{{x}}"將被替換成表示集數的數字. 前置依賴於type="episode".

必填項：否

link-tpl

說明：標籤頁和下拉式選單裡的劇集跳轉連結, 連結裡的"{{x}}"將會被替換成表示集數的數字. 前置依賴於type="episode",當type="episode"為必填.

必填項：否

head-title

說明：標籤頁與下拉選單裡的劇集跳轉新頁的頭部標題. 前置依賴於type="episode",當type="episode"為必填.

必填項：否