切换器／Switcher

# 切换器／Switcher

<p class="uk-text-lead">在不同的内容窗口之间动态切换。</p>

## Usage-用法

切换器组件由多个切换器及其相关联的内容项组成。添加 `uk-switcher` 属性到包含这些切换器的容器元素中，再添加 `.uk-switcher` class到包含内容项的容器元素中。

默认情况下，带有 `.uk-switcher` class 的元素必须直接继承切换器的切换功能才能正常工作。如果需要将其嵌套在另一个元素中，比如嵌套在网格中，需要在 `uk-switcher` 属性中添加 `connect: SELECTOR` 选项，并设置包含要切换的项的切换器元素。

通常切换器通过其他组件来设置样式，此处只展示其中一部分。

```html
<!-- 这是包含切换器的导航 -->
<ul uk-switcher>
    <li><a href="#"></a></li>
</ul>

<!-- 这是内容项的容器 -->
<ul class="uk-switcher">
    <li></li>
</ul>
```

本示例里我们使用了 [Subnav 组件](subnav.md).

```example
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>Hello!</li>
    <li>Hello again!</li>
    <li>Bazinga!</li>
</ul>
```

***

## Navigation controls-导航控件

在某些情况下，您希望从当前的活动内容中切换到另一块内容。可以使用 `uk-switcher-item` 属性实现。如果要指向某一个特定内容，需要将属性设置为该特定内容的数字编号。

将属性设置为 `next` 和 `previous` 将切换到相邻项目。

```html
<ul class="uk-switcher uk-margin">
    <li><a href="#" uk-switcher-item="0"></a></li>
    <li><a href="#" uk-switcher-item="1"></a></li>
    <li><a href="#" uk-switcher-item="next"></a></li>
    <li><a href="#" uk-switcher-item="previous"></a></li>
</ul>
```

```example
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>
<ul class="uk-switcher uk-margin">
    <li>Hello! <a href="#" uk-switcher-item="2">Switch to item 3</a></li>
    <li>Hello again! <a href="#" uk-switcher-item="next">Next item</a></li>
    <li>Bazinga! <a href="#" uk-switcher-item="previous">Previous item</a></li>
</ul>
```

***

## Connect multiple containers-多个容器关联

可以同时关联多个内容容器。只需添加 `uk-switcher` 参数到 `connect` 属性并使用适用于所有内容项的内容容器的选择器。

```html
<!-- This is the nav containing the toggling elements -->
<ul uk-switcher="connect: .my-class">...</ul>

<!-- These are the containers of the content items -->
<ul class="uk-switcher my-class">...</ul>

<ul class="uk-switcher my-class">...</ul>
```

```example
<ul class="uk-subnav uk-subnav-pill" uk-switcher="connect: .switcher-container">
    <li><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<h4>Container 1</h4>

<ul class="uk-switcher switcher-container uk-margin">
    <li>Hello!</li>
    <li>Hello again!</li>
    <li>Bazinga!</li>
</ul>

<h4>Container 2</h4>

<ul class="uk-switcher switcher-container uk-margin">
    <li>Hello! The first item.</li>
    <li>Hello again! The second item.</li>
    <li>Bazinga! The third item.</li>
</ul>
```

***

## Animations-动画

可以将 [Animation 组件](animation) 中的所有动画应用于切换器项。为此，需要添加带有相关动画效果class的 `animation` 参数到 `uk-switcher` 属性中。

```html
<ul uk-switcher="animation: uk-animation-fade">...</ul>
```

```example
<ul class="uk-subnav uk-subnav-pill" uk-switcher="animation: uk-animation-fade">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>Hello!</li>
    <li>Hello again!</li>
    <li>Bazinga!</li>
</ul>
```

***

### 多个动画

也可以应用 [Animation 组件](animation)中的多个动画。这样可以为入场和出场添加不同的动画效果。

```html
<ul uk-switcher="animation: uk-animation-slide-left-medium, uk-animation-slide-right-medium">...</ul>
```

```example
<ul class="uk-subnav uk-subnav-pill" uk-switcher="animation: uk-animation-slide-left-medium, uk-animation-slide-right-medium">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>Hello!</li>
    <li>Hello again!</li>
    <li>Bazinga!</li>
</ul>
```

***

## Switcher and subnav-切换器和子导航

切换器可以轻松的用于 [Subnav 组件](subnav)中。

```html
<!-- This is the subnav containing the toggling elements -->
<ul class="uk-subnav uk-subnav-pill" uk-switcher>...</ul>

<!-- This is the container of the content items -->
<ul class="uk-switcher"></ul>
```

```example
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
</ul>
```


***

## Switcher and tab-切换器和标签页

作为规则的特例，在标签页导航中添加 `uk-tab` 属性来替代 `uk-switcher` ，将切换器与 [Tab 组件](tab)结合起来。

```html
<!-- This is the subnav containing the toggling elements -->
<ul uk-tab>...</ul>

<!-- This is the container of the content items -->
<ul class="uk-switcher">...</ul>
```

```example
<ul uk-tab>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
</ul>
```

***

### 垂直的标签页

使用 [Grid](grid) 和 [Width](width) 组件可以以垂直选项卡式的导航显示内容。

```html
<div uk-grid>
    <div class="uk-width-auto">
        <ul class="uk-tab-left" uk-tab="connect: #my-id">...</ul>
    </div>
    <div class="uk-width-expand">
        <ul id="my-id" class="uk-switcher">...</ul>
    </div>
</div>
```

```example
<div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <div uk-grid>
            <div class="uk-width-auto@m">
                <ul class="uk-tab-left" uk-tab="connect: #component-tab-left; animation: uk-animation-fade">
                    <li><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
            <div class="uk-width-expand@m">
                <ul id="component-tab-left" class="uk-switcher">
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
                    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
                </ul>
            </div>
        </div>
    </div>
    <div>
        <div uk-grid>
            <div class="uk-width-auto@m uk-flex-last@m">
                <ul class="uk-tab-right" uk-tab="connect: #component-tab-right; animation: uk-animation-fade">
                    <li><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
            <div class="uk-width-expand@m">
                <ul id="component-tab-right" class="uk-switcher">
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
                    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
                </ul>
            </div>
        </div>
    </div>
</div>
```

***

## Switcher and button-切换器和按钮

切换器还可以使用 [Button 组件](button)中的按钮或按钮组。只需将切换器的属性添加到包含一组按钮的块容器上或添加到具有 `.uk-button-group` class的元素即可。

```html
<!-- This is a switcher using a number of buttons -->
<div uk-switcher="toggle: > *">
    <button class="uk-button uk-button-default" type="button"></button>
    <button class="uk-button uk-button-default" type="button"></button>
</div>

<ul class="uk-switcher">...</ul>
```

```example
<div uk-switcher="animation: uk-animation-fade; toggle: > *">
    <button class="uk-button uk-button-default" type="button">Item</button>
    <button class="uk-button uk-button-default" type="button">Item</button>
    <button class="uk-button uk-button-default" type="button">Item</button>
</div>

<ul class="uk-switcher uk-margin">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
</ul>
```

**注意** 由于本例没有将按钮包裹到列表项中，因此必须使用 `toggle` 选项来更改触发内容切换的可单击元素。

***

## Switcher and nav-切换器和导航菜单

要将切换器应用于 [Nav 组件](nav), 请将 `uk-switcher` 属性添加到导航菜单的 `<ul>` 元素。使用 [Grid](grid) 和 [Width](width) 组件将导航菜单及其内容排列到网格布局中。

```html
<div uk-grid>
    <div class="uk-width-small">
        <ul class="uk-nav uk-nav-default" uk-switcher="connect: #my-id">...</ul>
    </div>
    <div class="uk-width-expand">
        <ul id="my-id" class="uk-switcher">...</ul>
    </div>
</div>
```

```example
<div uk-grid>
    <div class="uk-width-small@m">

        <ul class="uk-nav uk-nav-default" uk-switcher="connect: #component-nav; animation: uk-animation-fade">
            <li><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>
    <div class="uk-width-expand@m">

        <ul id="component-nav" class="uk-switcher">
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
            <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
        </ul>

    </div>
</div>
```

***

## Component options-组件选项

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

| 选项      | 可选值        | 默认值 | 描述                                                     |
|:------------|:-------------|:--------|:----------------------------------------|
| `connect`   | CSS selector | `~.uk-switcher` | 被关联的项目容器。默认情况下，这是带 'uk-switcher' class的下一个元素  |
| `toggle `   | CSS selector | `> * > :first-child`   | 点击可以触发内容切换的元素的选择器。   |
| `itemNav `  | CSS selector | `false` | 相关联的导航容器。导航项目默认仅在相关项目容器中找到。|
| `active `   | Number       | `0`     | 初始化时活动单元的索引值。填写负数表示从集合的末尾开始。 |
| `animation` | String       | `false` | 用空格分隔的要使用的动画名称，隐藏时的动画需要用逗号分隔开。   |
| `duration`  | Number       | `200`   | 动画持续时间      |
| `swiping`   | Boolean      | `true`  | 使用swiping       |

`connect` 是 _Primary_ 的选项，如果它是属性值中的唯一选项，则可以省略其键。

```html
<span uk-switcher=".switcher-container"></span>
```

***

## JavaScript

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

### 初始化

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

### 事件

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

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

### 方法

以下方法可用于该组件：

#### Show

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

显示具有指定索引值的切换器项目。

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