# 選項卡
創建擁有不同樣式的選項卡導航。
## 用法
選項卡組件由一些并列的可點擊選項卡標簽組成。
| Class類 | 描述 |
| --- | --- |
| `.uk-tab` | 添加這個類到一個 `<ul>` 元素中定義一個選項卡組件。在列表中使用 `<a>` 元素作為選項卡標簽。 |
| `.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` | 添加這個內到 `<ul>` ,將選項卡標簽放在底部。這個類也能和其他類組合使用。 |
### 示例

### 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` 類到包含選項卡的 `<div>` 元素中,使選項卡居中。
#### 示例

#### 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 選項卡切換時 |
- UIkit 中文文檔
- 開始使用
- 初學者
- 開始使用
- 如何自定義
- 布局示例
- 開發者
- 項目結構
- Less & Sass 文件
- 創建主題
- 創建樣式
- Customizer.json
- JavaScript
- 自定義前綴
- 核心組件
- 默認
- 基礎
- 打印
- 布局類組件
- 網格
- 面板/Panel
- 塊/Block
- 文章
- 評論/Comment
- 效果/Utility
- Flex 布局
- 覆蓋/Cover
- 導航類組件
- 導航菜單
- 導航欄
- 二級導航
- 面包屑/Breadcrumb
- 分頁
- 選項卡
- 縮略圖導航/Thumbnav
- 頁面元素
- 列表
- 描述列表
- 表格
- 表單
- 常用組件
- 按鈕
- 圖標
- 關閉/Close
- 徽章/Badge
- 提示框
- 縮略圖/Thumbnail
- 遮罩/Overlay
- 文本
- 列
- 動畫
- 對比度/Contrast
- JAVASCRIPT組件
- 下拉菜單
- 模態對話框
- 抽屜/Off-canvas
- 切換器/Switcher
- 撥動/toggle
- 滾動監聽/Scrollspy
- 平滑滾動
- 附加組件
- 布局類組件
- 動態網格
- 視差網格
- 導航類組件
- 圓點導航
- 滑動導航/Slidenav
- 動態分頁
- 常用組件
- 高級表單
- 文件表單/Form file
- 密碼表單
- 選擇表單
- 占位符
- 進度條/Progress
- JAVASCRIPT組件
- 燈箱/Lightbox
- 自動完成/Autocomplete
- 日期選擇器/Datepicker
- HTML 編輯器
- 滾動條/Slider
- 滑塊集/Slideset
- 幻燈片/Slideshow
- 視差/Parallax
- 手風琴/Accordion
- 通知/Notify
- 搜索/Search
- 可嵌套/Nestable
- 可排序/Sortable
- 附著/Sticky
- 時間選擇器
- 工具提示/Tooltip
- 上傳