mip-vd-tabs tab switching component


mip-vd-tabs is used to support the display of tabs in web pages. It is not recommended to use it when there are many elements in the tab page, as it will affect the page performance.

QQ截图20170204132252.png

Example

A total of 5 styles are supported

Equally divided Fixed tab page

<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>

Sliding tab page

<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>

Sliding tab page with drop-down button

<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>

Bottom tab page

<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>

Plot expansion tab page 

<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>

Attribute

type

Description: There are three special types, bottom (bottom tab), episode (plot tab), if not filled in, it will be the default special type Type
Required fields: No

allow-scroll

Description: Allow sliding
Required fields: No

toggle-more

Description: Whether to display the drop-down button. The front-end depends on the allow-scroll attribute
Required: No

toggle-label

Description: The drop-down description text. The front-end depends on toggle -more attribute
Required: No

current

Description: The currently selected tab page starts counting from 0 (current="3" means the 4th tab page). When type="episode", it means the current episode, counting from 1 (current="4" means episode 4), the default is 1.
Required field: No

total

Description: The total number of episodes. The prefix depends on type="episode", and when type="episode" is required
Required fields: No

page-size

Description: Display the number of episodes per page. The prefix depends on type="episode", the default is 50
Required fields: No

text-tpl

Description: In the episode copy displayed on the tab page, "{{x}}" in "Episode {{x}}" will be replaced with a number indicating the episode number. The prefix depends on type="episode".
Required: No

Description: For episode jump links in tabs and drop-down menus, "{{x}}" in the link will be replaced by A number indicating the number of episodes. The prefix depends on type="episode", when type="episode" is required.
Required field: No

head-title

Description : The head title of the new page that the episodes in the tab page and drop-down menu jump to. The prefix depends on type="episode", when type="episode" is required.
Required field: No