composant de commutation d'onglets mip-vd-tabs

mip-vd-tabs est utilisé pour prendre en charge l'affichage des onglets dans les pages Web. Il n'est pas recommandé de l'utiliser lorsqu'il y a de nombreux éléments dans la page à onglet, car cela affectera les performances de la page

Exemple

Un total de 5 styles sont pris en charge

Page à onglet fixe à parts égales

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

Page à onglet coulissant horizontal

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

Horizontal avec bouton déroulant Page à onglet coulissant

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

Page à onglet inférieur

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

Page à onglet d'extension de tracé

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

Attributs

type

Description : Il existe trois types spéciaux, en bas (en bas onglet), épisode (onglet intrigue), laissez-le vide C'est le type par défaut
Élément requis : Non

allow-scroll

Description : Autoriser le glissement
Élément requis : Non

toggle-more

Description : S'il faut afficher le bouton déroulant. Le recto dépend de l'attribut allow-scroll
Éléments requis : Non

toggle-label

Description : Le texte de description déroulant dépend de l'attribut toggle-more
Éléments requis : Non

current

Description : La page d'étiquette actuellement sélectionnée, en comptant à partir de 0 (current="3" signifie le 4ème onglet). Lorsque type="episode", cela signifie l'épisode en cours, en comptant à partir de 1 (current="4" signifie). le 4ème épisode), la valeur par défaut est 1.
Élément requis : Non

total

Description : Le nombre total d'épisodes dépend du type="episode" et du moment où type="episode" est requis
Élément requis. : Non

page-size

Description : Chaque La page affiche le nombre d'épisodes. Le préfixe dépend du type="episode", la valeur par défaut est 50
Obligatoire : Non

text-tpl

Description : La copie de l'épisode. affiché sur la page à onglet, "{{x} }Le "{{x}}" dans "episode" sera remplacé par un nombre indiquant le nombre d'épisodes. Le préfixe dépend du type="episode".
Obligatoire : Non

link-tpl

Description : page à onglet et Pour le lien de saut d'épisode dans le menu déroulant, "{{x}}" dans le lien sera remplacé par un chiffre indiquant le nombre d'épisodes. Le préfixe dépend de. type="episode", lorsque type="episode" est requis
Obligatoire : Non

head-title

Description : Le titre d'en-tête de la nouvelle page lorsque les épisodes sautent dans la page à onglet et le menu déroulant. front dépend de type="episode", lorsque type="episode" est obligatoire.
Champ obligatoire : Non