mip-vd-tabs 탭 전환 구성 요소

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

설명: 세 가지 특수 유형이 있습니다. 탭), 에피소드(플롯 탭), 비워두기 기본형입니다
필수항목 : No

allow-scroll

설명 : 슬라이딩 허용
필수항목 : No

toggle-more

설명 : 표시 여부 드롭다운 버튼. 전면은 스크롤 허용 속성에 따라 다릅니다.
필수 항목: 아니요

toggle-label

설명: 드롭다운 설명 텍스트는 토글 추가 속성에 따라 다릅니다.
필수 항목: 아니요

current

설명: 현재 선택된 레이블 페이지는 0부터 계산됩니다(current="3"은 4번째 탭을 의미함). type="episode"인 경우 1부터 계산하여 현재 에피소드를 의미합니다(current="4"는 4화), 기본값은 1입니다.
필수항목: No

total

설명: 총 에피소드 수는 type="episode"에 따라 달라지며, type="episode"가 필요한 경우
필수 항목입니다. : No

page-size

설명: Every 페이지는 에피소드 수를 표시합니다. 접두사는 type="episode"에 따라 다르며 기본값은 50
필수: No

text-tpl

설명: 에피소드 사본 탭 페이지에 표시되는 "{{x} }"episode"의 "{{x}}"는 에피소드 수를 나타내는 숫자로 대체됩니다. 접두사는 type="episode"에 따라 다릅니다.
필수: 아니요

link-tpl

설명: 탭 페이지 및 드롭다운 메뉴의 에피소드 점프 링크의 경우 링크의 "{{x}}"는 에피소드 수를 나타내는 숫자로 대체됩니다. type="episode", type="episode"가 필수인 경우
필수: No

head-title

설명: 탭 페이지 및 드롭다운 메뉴의 에피소드가 이동할 때 새 페이지의 헤드 제목입니다. type="episode"가 필수인 경우 전면은 type="episode"에 따라 다릅니다.
필수 항목: 아니요