MDC

Tabs

Demo

Active

Code
<mdc-tab tabindex="0">Unselected</mdc-tab>

<mdc-tab tabindex="0" active>Selected</mdc-tab>

Icon Only

Code
<mdc-tab tabindex="0">
    <mdc-icon slot="icon" name="favorite"></mdc-icon>
</mdc-tab>

<mdc-tab tabindex="0" active>
    <mdc-icon slot="icon" name="home"></mdc-icon>
</mdc-tab>

<mdc-tab tabindex="0" variant="secondary">
    <mdc-icon slot="icon" name="search"></mdc-icon>
</mdc-tab>

<mdc-tab tabindex="0" variant="floating" active>
    <mdc-icon slot="icon" name="star"></mdc-icon>
</mdc-tab>

Icon

Code
<mdc-tab tabindex="0">
    <mdc-icon slot="icon" name="favorite"></mdc-icon>
    <span>Favorites</span>
</mdc-tab>

<mdc-tab tabindex="0" active>
    <mdc-icon slot="icon" name="home"></mdc-icon>
    <span>Home</span>
</mdc-tab>

<mdc-tab tabindex="0" variant="secondary">
    <mdc-icon slot="icon" name="search"></mdc-icon>
    <span>Search</span>
</mdc-tab>

<mdc-tab tabindex="0" variant="secondary" active>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>Messages</span>
</mdc-tab>

<mdc-tab tabindex="0" variant="floating">
    <mdc-icon slot="icon" name="star"></mdc-icon>
    <span>Starred</span>
</mdc-tab>

<mdc-tab tabindex="0" variant="floating" active>
    <mdc-icon slot="icon" name="settings"></mdc-icon>
    <span>Settings</span>
</mdc-tab>

Variant

Code
<mdc-tab tabindex="0">Primary</mdc-tab>

<mdc-tab tabindex="0" active>Primary active</mdc-tab>

<mdc-tab tabindex="0" variant="secondary">Secondary</mdc-tab>

<mdc-tab tabindex="0" variant="secondary" active>Secondary active</mdc-tab>

<mdc-tab tabindex="0" variant="floating">Floating</mdc-tab>

<mdc-tab tabindex="0" variant="floating" active>Floating active</mdc-tab>

Active Tab Index

Code
<mdc-tabs active-tab-index="0">
    <mdc-tab>Tab one</mdc-tab>
    <mdc-tab>Tab two</mdc-tab>
    <mdc-tab>Tab three</mdc-tab>
</mdc-tabs>

<mdc-tabs active-tab-index="1">
    <mdc-tab>Tab one</mdc-tab>
    <mdc-tab>Tab two</mdc-tab>
    <mdc-tab>Tab three</mdc-tab>
</mdc-tabs>

<mdc-tabs active-tab-index="2">
    <mdc-tab>Tab one</mdc-tab>
    <mdc-tab>Tab two</mdc-tab>
    <mdc-tab>Tab three</mdc-tab>
</mdc-tabs>

Auto Activate

Code
<!-- auto-activate 預設即為 true（反射屬性）：鍵盤以方向鍵在 tab 間移動時，
     焦點停留的 tab 會立即被選取。若要改為「僅移動焦點、不自動選取」，
     需以 JS 屬性 autoActivate = false 設定（HTML 布林屬性無法表達 false）。 -->
<mdc-tabs>
    <mdc-tab>Tab one</mdc-tab>
    <mdc-tab>Tab two</mdc-tab>
    <mdc-tab>Tab three</mdc-tab>
</mdc-tabs>

Variant

Code
<mdc-tabs active-tab-index="1">
    <mdc-tab>Tab one</mdc-tab>
    <mdc-tab>Tab two</mdc-tab>
    <mdc-tab>Tab three</mdc-tab>
</mdc-tabs>

<mdc-tabs active-tab-index="0">
    <mdc-tab variant="secondary">
        <mdc-icon slot="icon" name="search"></mdc-icon>
        <span>Search</span>
    </mdc-tab>
    <mdc-tab variant="secondary">
        <mdc-icon slot="icon" name="home"></mdc-icon>
        <span>Home</span>
    </mdc-tab>
    <mdc-tab variant="secondary">
        <mdc-icon slot="icon" name="settings"></mdc-icon>
        <span>Settings</span>
    </mdc-tab>
</mdc-tabs>

<mdc-tabs active-tab-index="2">
    <mdc-tab variant="floating">
        <mdc-icon slot="icon" name="favorite"></mdc-icon>
        <span>Favorites</span>
    </mdc-tab>
    <mdc-tab variant="floating">
        <mdc-icon slot="icon" name="star"></mdc-icon>
        <span>Starred</span>
    </mdc-tab>
    <mdc-tab variant="floating">
        <mdc-icon slot="icon" name="send"></mdc-icon>
        <span>Messages</span>
    </mdc-tab>
</mdc-tabs>