选项卡／Tab

# 选项卡／Tab

<p class="uk-text-lead">创建具有各种样式的选项卡导航。</p>

## Usage-用法

选项卡组件由多个可点击的选项卡组成，这些选项卡在列表中水平排列。它的JavaScript功能继承自 [Switcher 组件](switcher.md) ，必须要有 JS 功能才能切换不同tab标签页的内容。

| Class/属性 | 描述       |
|:----------------|:------------------------------------|
| `uk-tab`        | 添加到 `<ul>` 元素中以定义选项卡组件。使用 `<a>` 元素作为列表中的选项卡项。 |
| `.uk-active `   | 添加到列表项以应用活动状态。               |
| `.uk-disabled ` | 添加到列表项应用禁用状态。同时从锚点中移除 `href` 属性，以使其无法通过键盘导航访问。|

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

```example
<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>
```

***

## Bottom modifier-底部修饰

添加 `.uk-tab-bottom` class以将选项卡项翻转到底部。

```html
<ul class="uk-tab-bottom" uk-tab>...</ul>
```

```example
<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>
```

***

## Left/Right modifiers-左侧/右侧修饰

添加 `.uk-tab-left` 或 `.uk-tab-right` class以使选项卡在左侧或右侧垂直对齐。为了节省空间，当视口宽度宽度低于960px时，对齐方式将自动变回水平对齐。

使用垂直对齐时，通常会使用网格来设置布局，如下面这个 [Switcher 示例](switcher.md#vertical-tabs)所示。

```html
<ul class="uk-tab-left" uk-tab>...</ul>

<ul class="uk-tab-right" uk-tab>...</ul>
```

```example
<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`即可。

```html
<ul class="uk-tab-left" uk-tab="media: @s">...</ul>
```

***

## Alignment-对齐

可以将选项卡与 [Flex 组件](flex.md) 或 [Width 组件](width.md) 结合使用来修改导航标签的对齐方式。

```html
<ul class="uk-flex-right" uk-tab>...</ul>
```

```example
<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>
```

***

## Tabs and Dropdown-选项卡和下拉菜单

选项卡可用于触发 [Dropdown 组件](dropdown.md)中的下拉菜单。

```html
<ul uk-tab>
    <li>

        <!-- 这是切换下拉菜单的菜单项 -->
        <a href=""></a>

        <!-- 这是下拉菜单 -->
        <div uk-dropdown="mode: click">
            <ul class="uk-nav uk-dropdown-nav">...</ul>
        </div>

    </li>
</ul>
```

```example
<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>
```

***

## Component options-组件选项

以下选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 [了解更多](javascript.md#component-configuration)

| 选项      | 可用值           | 默认值 | 描述       |
|:------------|:----------------|:--------|:-------------------------------------------------|
| `connect`   | CSS selector    | `false` | 被关联的项目容器。默认情况下，是 'uk-switcher' class的下一个元素。              |
| `toggle `   | CSS selector    | `> *`   | 切换选择器，点击时触发内容切换。  |
| `active `   | Number          | `0`     | 初始化时活动单元的索引值。设为负数表示从集合末尾开始的位置。 |
| `animation` | String          | `false` | 用空格分隔的要使用的动画名称，隐藏时的动画需要用逗号分隔开。   |
| `duration`  | Number          | `200`   | 动画持续时间。     |
| `swiping`   | Boolean         | `true`  | 使用滑动。    |
| `media`     | Integer, String | `960`   | 何时切换到水平模式-宽度为整数（例如640）或断点（例如@ s，@ m，@ l，@ xl）或任何有效的媒体查询（例如（最小宽度：900px））。 |

***

## JavaScript

了解更多关于 [JavaScript 组件](javascript.md#programmatic-use)的内容。

### 初始化

```js
UIkit.tab(element, options);
```

### 事件

附加了此组件的元素的连接项将触发以下事件：

| Name         | 描述                                                              |
|:-------------|:-------------------------------------------------------------------------|
| `beforeshow` | 在显示项目之前触发。可以通过调用 `preventDefault()` 事件来阻止显示。 |
| `show`       | 显示一个项目后触发。                                           |
| `shown`      | 项目的显示动画完成后触发。                     |
| `beforehide` | 在隐藏项目前触发。可以通过调用 `preventDefault()` 事件来阻止隐藏。 |
| `hide`       | 在项目的隐藏动画开始后触发。                        |
| `hidden`     |    项目被隐藏后触发。                                         |

### 方法

以下方法可用于该组件：

#### Show

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

显示具有给定索引的Tab项目。

| Name    | 类型                  | 默认值 | 描述                      |
|:--------|:----------------------|:--------|:---------------------------------|
| `index` | String, Integer, Node | 0       | 要显示的选项卡项。从0开始的索引。 |