分頁

使用不同樣式建立分頁導覽。

用法

分頁元件包含可點擊的分頁，這些分頁在列表中並排對齊。它的 JavaScript 功能擴展了切換器元件，並且是使用分頁導覽動態切換不同內容所必需的。

類別/屬性	描述
`uk-tab`	將此屬性新增至 `<ul>` 元素以定義分頁元件。在清單內使用 `<a>` 元素作為分頁項目。
`.uk-active`	將此類別新增至清單項目以套用活動狀態。
`.uk-disabled`	將此類別新增至清單項目以套用停用狀態。同時移除錨點中的 `href` 屬性，使其無法透過鍵盤導覽存取。

<ul uk-tab>
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
    <li class="uk-disabled"><a></a></li>
</ul>

<ul uk-tab>
    <li class="uk-active"><a href="#">Left</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li class="uk-disabled"><a>Disabled</a></li>
</ul>

底部修飾符

新增 .uk-tab-bottom 類別以將分頁項目翻轉到底部。

<ul class="uk-tab-bottom" uk-tab>…</ul>

<ul class="uk-tab-bottom" uk-tab>
    <li class="uk-active"><a href="#">Left</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

左/右修飾符

新增 .uk-tab-left 或 .uk-tab-right 類別以將分頁垂直對齊到左側或右側。為了節省空間，當視窗寬度低於 960px 時，對齊方式會自動切換回水平。

使用垂直對齊時，您通常會建立網格以套用佈局，如切換器範例中所示。

<ul class="uk-tab-left" uk-tab>…</ul>

<ul class="uk-tab-right" uk-tab>…</ul>

<div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <ul class="uk-tab-left" uk-tab>
            <li class="uk-active"><a href="#">Left</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

    <div>
        <ul class="uk-tab-right" uk-tab>
            <li class="uk-active"><a href="#">Right</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

響應式

若要變更垂直和水平對齊之間的預設斷點，只需將 media 選項與適當的視窗寬度套用至屬性。新增以像素為單位的數字，例如 media: 640，或斷點，例如 media: @m。

<ul class="uk-tab-left" uk-tab="media: @s">…</ul>

對齊

您可以將分頁與彈性元件或寬度元件結合使用，以修改導覽的對齊方式。

<ul class="uk-flex-right" uk-tab>…</ul>

<div class="uk-margin-medium-top">
    <ul class="uk-flex-center" uk-tab>
        <li class="uk-active"><a href="#">Center</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

<div>
    <ul class="uk-flex-right" uk-tab>
        <li class="uk-active"><a href="#">Right</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

<div>
    <ul class="uk-child-width-expand" uk-tab>
        <li class="uk-active"><a href="#">Justify</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

分頁可用於從下拉選單元件觸發下拉選單。

<ul uk-tab>
    <li>

        <!-- This is the menu item toggling the dropdown -->
        <a href=""></a>

        <!-- This is the dropdown -->
        <div uk-dropdown="mode: click">
            <ul class="uk-nav uk-dropdown-nav">…</ul>
        </div>

    </li>
</ul>

<ul uk-tab>
    <li class="uk-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li>
        <a href>More <span uk-icon="icon: triangle-down"></span></a>
        <div uk-dropdown="mode: click">
            <ul class="uk-nav uk-dropdown-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </li>
</ul>

元件選項

這些選項中的任何一個都可以套用至元件屬性。以分號分隔多個選項。瞭解更多

選項	值	預設值	描述
`connect`	CSS 選擇器	`false`	相關項目的容器。預設情況下，這是具有 'uk-switcher' 類別的下一個元素。
`toggle`	CSS 選擇器	`> *`	切換選擇器，該選擇器會觸發點擊時的內容切換。
`active`	數字	`0`	初始化時的活動索引。提供負數表示從集合的末尾開始的位置。
`animation`	字串	`false`	動畫的以空格分隔的名稱。以逗號分隔表示動畫結束。
`duration`	數字	`200`	動畫持續時間。
`swiping`	布林值	`true`	使用滑動。
`media`	數字、字串	`960`	何時切換到水平模式 - 以整數表示的寬度（例如 640）或斷點（例如 @s、@m、@l、@xl）或任何有效的媒體查詢（例如 (min-width: 900px)）。

JavaScript

深入瞭解JavaScript 元件。

初始化

UIkit.tab(element, options);

事件

在附加此元件的元素的連接項目上會觸發下列事件

名稱	描述
`beforeshow`	在顯示項目之前觸發。可以透過在事件上呼叫 `preventDefault()` 來防止顯示。
`show`	在顯示項目之後觸發。
`shown`	在項目顯示動畫完成後觸發。
`beforehide`	在隱藏項目之前觸發。可以透過在事件上呼叫 `preventDefault()` 來防止隱藏。
`hide`	在項目的隱藏動畫開始後觸發。
`hidden`	在隱藏項目後觸發。

方法

下列方法適用於元件

顯示

UIkit.tab(element).show(index);

顯示具有指定索引的分頁項目。

名稱	類型	預設值	描述
`index`	字串、數字、節點	0	要顯示的分頁項目。以 0 為基礎的索引。

協助工具

分頁元件遵循分頁 WAI-ARIA 設計模式，並自動設定適當的 WAI-ARIA 角色、狀態和屬性。

分頁導覽具有 tablist 角色，如果它是導覽元件，則 aria-orientation 狀態會設定為 vertical。
分頁導覽項目具有 presentation 角色。
分頁導覽連結具有 ID、tab 角色、aria-selected 狀態，以及設定為各自內容項目 ID 的 aria-controls 屬性。
內容清單具有 presentation 角色。
內容清單項目具有 ID、tabpanel 角色，以及設定為各自索引標籤 ID 的 aria-labelledby 屬性。

鍵盤互動

可以使用下列按鍵，透過鍵盤存取分頁導覽。

tab 或 shift+tab 按鍵將焦點置於分頁導覽中的活動索引標籤上。如果焦點已經位於活動索引標籤上，則焦點將移至分頁導覽外的下一個元素。
左/右箭頭或 上/下箭頭按鍵（取決於方向）在索引標籤之間導覽。如果焦點位於最後一個索引標籤上，則會移至第一個索引標籤。
enter 或 space 按鍵會啟動焦點索引標籤的對應內容項目。
home 或 end 按鍵會將焦點移至第一個或最後一個索引標籤。

預設情況下，切換器元件具有手動啟動行為。這表示只有使用 enter 或 space 按鍵才會啟動對應的內容項目。若要切換為自動啟動，請將 follow-focus 設定為 true。在索引標籤項目之間導覽時，對應的內容項目會自動啟動。

文件

分頁