mip-vd-tabs タブ切り替えコンポーネント


mip-vd-tabs は、Web ページのタブの表示をサポートするために使用されます。ページのパフォーマンスに影響するため、タブ ページに多くの要素がある場合は使用しないことをお勧めします

QQ截图20170204132252.png

例

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

プロパティ

タイプ

説明: 3 つの特別なタイプがあります。タブ）、エピソード（プロットタブ）、空白のままにしておきます デフォルトのタイプです
必須項目：いいえ

allow-scroll

説明：スライドを許可します
必須項目：いいえ

toggle-more

説明：表示するかどうかドロップダウン ボタン。前面は、allow-scroll 属性に依存します。
必須項目: いいえ

toggle-label

説明: ドロップダウンの説明テキストは、toggle-more 属性に依存します。
必須項目: いいえ

。

current

説明: 0 から数えて現在選択されているラベル ページ (current="3" は 4 番目のタブを意味します) type="episode" の場合、1 から数えて現在のエピソードを意味します (current="4" は 4 番目のタブを意味します)。 4 番目のエピソード)、デフォルトは 1 です。
必須項目: いいえ

合計

説明: エピソードの合計数は type="episode" に依存し、type="episode" が必須の場合は
必須項目です。 : No

page-size

Description: Every ページにはエピソードの数が表示されます。プレフィックスは type="episode" によって異なります。デフォルトは 50 です
必須: No

text-tpl

Description: エピソードのコピーです。タブページに表示される「{{x} }「episode」の「{{x}}」はエピソード数を示す数字に置き換えられます。プレフィックスはtype="episode"によって異なります。
必須: いいえ

説明: タブページとドロップダウンメニューのエピソードジャンプリンクの場合、リンク内の「{{x}}」はエピソード数を示す数字に置き換えられます。 type="episode" (type="episode" が必要な場合)
必須: いいえ

head-title

説明: タブ ページとドロップダウン メニューのエピソードがジャンプするときの新しいページのヘッド タイトル。 type="episode" が必須の場合、front は type="episode" に依存します。
必須フィールド: いいえ