# 選項卡 創建擁有不同樣式的選項卡導航。 ## 用法 選項卡組件由一些并列的可點擊選項卡標簽組成。 | Class類 | 描述 | | --- | --- | | `.uk-tab` | 添加這個類到一個 `&lt;ul&gt;` 元素中定義一個選項卡組件。在列表中使用 `&lt;a&gt;` 元素作為選項卡標簽。 | | `.uk-active` | 添加這個類到選項卡標簽，賦予選中狀態。 | | `.uk-disabled` | 添加這個類到選項卡標簽，賦予禁用狀態。 | `data-uk-tab` 屬性為兩個目的提供支持。其一，它使得響應式行為成為可能。如果父容器太小而不能容納所有的選項卡標簽，它們將會合并到一個下拉菜單中，并由一個獨立的默認選項卡作為撥動器。這里就需要用到 [下拉菜單組件](dropdown.html) 了。 第二，它的功能耦合了 [切換器組件](switcher.html),這是使用選項卡導航切換不同內容所必須的。 ### 示例  ### Code ``` <ul class="uk-tab" data-uk-tab> <li class="uk-active"><a href="">...</a></li> <li><a href="">...</a></li> <li><a href="">...</a></li> <li class="uk-disabled"><a href="">...</a></li> </ul> ``` * * * ## 水平方向的修飾 添加下列類中的一個，用來改變選項卡的外觀。這些修飾類可以組合使用。 ### 選項卡的對齊 | Class類 | 描述 | | --- | --- | | `.uk-tab-flip` | 添加這個類，使選項卡右對齊，并翻轉排列順序。 | | `.uk-tab-bottom` | 添加這個內到 `&lt;ul&gt;` ，將選項卡標簽放在底部。這個類也能和其他類組合使用。 | ### 示例  ### Code ``` <ul class="uk-tab uk-tab-flip" data-uk-tab>...</ul> <ul class="uk-tab uk-tab-bottom" data-uk-tab>...</ul> ``` * * * ### 調整選項卡標簽 添加 `.uk-tab-grid` 類和一個 [網格組件](grid.html) 中的 `.uk-width-*` 類，把選項卡標簽放入網格中，使它的寬度與父元素寬度一致。 #### 示例  #### Code ``` <ul class="uk-tab uk-tab-grid uk-tab-bottom" data-uk-tab> <li class="uk-width-1-3"><a href="">...</a></li> </ul> ``` * * * ### 選項卡標簽居中 添加 `.uk-tab-center` 類到包含選項卡的 `&lt;div&gt;` 元素中，使選項卡居中。 #### 示例  #### Code ``` <div class="uk-tab-center"> <ul class="uk-tab" data-uk-tab>...</ul> </div> ``` * * * ## 垂直方向的修飾 添加 `.uk-tab-left` 或 `.uk-tab-right` 類，將選項卡放置在左邊或者右邊。 ### 示例  ### Code ``` <ul class="uk-tab uk-tab-left uk-width-medium-1-2"> <li>...</li> </ul> ``` ``` <ul class="uk-tab uk-tab-right uk-width-medium-1-2"> <li>...</li> </ul> ``` ### 響應式行為 在狹窄的視口中，比如手機，垂直的選項卡會變成水平。添加 `data-uk-tab` 屬性將為水平排列的選項卡賦予相同的響應行為。 * * * ## 含有下拉菜單的選項卡 這個例子是關于怎樣使用帶有 [下拉菜單組件](dropdown.html)的選項卡。 #### 示例  #### Code ``` <ul class="uk-tab"> <li><a href="">...</a></li> <!-- 關聯JavaScript的容器 --> <li data-uk-dropdown="{mode:'click'}"> <!-- 撥動下拉菜單的元素 --> <a href="">...</a> <!-- 下拉菜單 --> <div class="uk-dropdown uk-dropdown-small"> <ul class="uk-nav uk-nav-dropdown"> <li><a href="">...</a></li> </ul> </div> </li> </ul> ``` * * * ### 事件 你可以為以下事件綁定回調，以實現自定義功能： | 名稱 | 參數 | 描述 | | --- | --- | --- | | `change.uk.tab` | event, active item | On tab item change 選項卡切換時 |