Switcher

在不同的内容面板之间动态过渡。

用法

切换器（Switcher）组件由若干切换项及其对应的内容项组成。为包含切换项的列表元素添加 uk-switcher 属性，并为包含内容项的容器元素添加 .uk-switcher 类。

默认情况下，带 .uk-switcher 类的元素必须紧跟在切换项之后，切换器才能正常工作。如果你需要把它嵌套在另一个元素中（例如使用网格时），请在 uk-switcher 属性中添加 connect: SELECTOR 选项，并选中包含待切换项目的元素。

通常，切换器的切换项是通过其他组件来设置样式的，下面展示其中一些用法。

<!-- This is the nav containing the toggling elements -->
<ul uk-switcher>
    <li><a href="#"></a></li>
</ul>

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

此示例中我们使用 Subnav 组件。

Hello!

Hello again!

Bazinga!

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

<div class="uk-switcher uk-margin">
    <div>Hello!</div>
    <div>Hello again!</div>
    <div>Bazinga!</div>
</div>

导航控件

某些情况下，你希望从当前内容内部切换到另一个内容区块。这可以通过 uk-switcher-item 属性实现。要以某个项目为目标，需要把该属性设置为相应内容项的序号。

把该属性设置为 next 或 previous，将切换到相邻的项目。

<div class="uk-switcher uk-margin">
    <div><a href="#" uk-switcher-item="0"></a></div>
    <div><a href="#" uk-switcher-item="1"></a></div>
    <div><a href="#" uk-switcher-item="next"></a></div>
    <div><a href="#" uk-switcher-item="previous"></a></div>
</div>

Hello! Switch to item 3

Hello again! Next item

Bazinga! Previous item

<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>
<div class="uk-switcher uk-margin">
    <div>Hello! <a href="#" uk-switcher-item="2">Switch to item 3</a></div>
    <div>Hello again! <a href="#" uk-switcher-item="next">Next item</a></div>
    <div>Bazinga! <a href="#" uk-switcher-item="previous">Previous item</a></div>
</div>

连接多个容器

你也可以连接多个内容容器。只需在 uk-switcher 属性中添加 connect 参数，并使用适用于所有项目的选择器。

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

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

<div class="uk-switcher my-class">…</div>

Container 1

Hello!

Hello again!

Bazinga!

Container 2

Hello! The first item.

Hello again! The second item.

Bazinga! The third item.

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

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

<h4>Container 2</h4>

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

动画

你可以把 Animation 组件中的所有动画应用到切换器的项目上。为此，请在 uk-switcher 属性中添加带相应类的 animation 参数。

<ul uk-switcher="animation: uk-animation-fade">…</ul>

Hello!

Hello again!

Bazinga!

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

<div class="uk-switcher uk-margin">
    <div>Hello!</div>
    <div>Hello again!</div>
    <div>Bazinga!</div>
</div>

多个动画

你还可以应用 Animation 组件中的多个动画。这样就能为进入和退出设置不同的动画。

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

Hello!

Hello again!

Bazinga!

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

<div class="uk-switcher uk-margin">
    <div>Hello!</div>
    <div>Hello again!</div>
    <div>Bazinga!</div>
</div>

Switcher 与 Subnav

切换器可以很方便地应用到 Subnav 组件。

<!-- 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 -->
<div class="uk-switcher"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.

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

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

Switcher 与 Tab

作为规则的例外，要把切换器与 Tab 组件结合使用，请在选项卡导航上添加 uk-tab 属性，而不是 uk-switcher。

<!-- 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>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.

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

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

垂直选项卡

使用 Grid 和 Width 组件，让内容与垂直选项卡导航正确配合显示。

<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">
        <div id="my-id" class="uk-switcher">…</div>
    </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.

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

Switcher 与 Button

切换器也可以应用到 Button 组件的按钮或按钮组上。只需把切换器属性添加到包裹一组按钮的块上，或者添加到带 .uk-button-group 类的元素上。

<!-- 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>

<div class="uk-switcher">…</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.

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

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

注意由于此示例没有把按钮包裹在列表项中，触发内容切换的可点击元素必须通过 toggle 选项来改变。

Switcher 与 Nav

要把切换器应用到 Nav 组件，请为导航的 <ul> 元素添加 uk-switcher 属性。使用 Grid 和 Width 组件，可以把导航和内容按网格布局排列。

<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">
        <div id="my-id" class="uk-switcher">…</div>
    </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.

<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">

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

    </div>
</div>

组件选项

这些选项都可以应用到组件属性上。多个选项之间用分号分隔。了解更多

选项	值	默认值	说明
`connect`	CSS selector	`~.uk-switcher`	相关联的项目容器。默认为其后带 'uk-switcher' 类的元素。
`toggle`	CSS selector	`> * > :first-child`	选择触发内容切换的可点击元素。
`itemNav`	CSS selector	`false`	相关联的导航容器。默认情况下，导航项只在相关联的项目容器中查找。
`active`	Number	`0`	初始化时的激活索引。传入负数表示从集合末尾开始的位置。
`animation`	String	`false`	以空格分隔的动画名称。退出动画用以逗号分隔。
`duration`	Number	`200`	动画时长。
`swiping`	Boolean	`true`	使用滑动操作。
`followFocus`	Boolean	`false`	选中项自动跟随焦点。

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

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

JavaScript

了解更多关于 JavaScript 组件的内容。

初始化

UIkit.switcher(element, options);

事件

以下事件会在绑定了该组件的元素的关联项目上触发：

名称	说明
`beforeshow`	项目显示之前触发。可以通过在事件上调用 `preventDefault()` 来阻止显示。
`show`	项目显示之后触发。
`shown`	项目的显示动画完成之后触发。
`beforehide`	项目隐藏之前触发。可以通过在事件上调用 `preventDefault()` 来阻止隐藏。
`hide`	项目的隐藏动画开始之后触发。
`hidden`	项目隐藏之后触发。

方法

该组件提供以下方法：

Show

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

显示具有指定索引的 Switcher 项目。

名称	类型	默认值	说明
`index`	String, Number, Node	0	要显示的切换器项目。索引从 0 开始。

可访问性

Switcher 组件遵循 Tab 的 WAI-ARIA 设计模式，并会自动设置恰当的 WAI-ARIA 角色、状态和属性。

切换导航带有 tablist 角色，如果它是 Nav 组件，还会把 aria-orientation 状态设为 vertical。
切换导航项带有 presentation 角色。
切换导航链接带有 ID、tab 角色、aria-selected 状态，并且 aria-controls 属性被设为相应内容项的 ID。
内容列表带有 presentation 角色。
内容列表项带有 ID、tabpanel 角色，并且 aria-labelledby 属性被设为相应切换项的 ID。

键盘交互

可以通过以下按键从键盘访问切换导航。

tab 或 shift+tab 键会把焦点放在切换导航中的激活切换项上。如果焦点已经位于激活切换项上，焦点会移动到切换导航之外的下一个元素。
根据排列方向，left/right arrow 或 up/down arrow 键会在各个切换项之间导航。如果焦点位于最后一个切换项上，则会移动到第一个切换项。
enter 或 space 键会激活所聚焦切换项对应的内容项。
home 或 end 键会把焦点移动到第一个或最后一个切换项。

默认情况下，Switcher 组件采用手动激活行为。这意味着对应的内容项只有在按下 enter 或 space键时才会被激活。要切换为自动激活，请把 follow-focus 设为 true。这样在切换项之间导航时，对应的内容项会自动激活。

文档

Switcher

Container 1

Container 2