切换器

动态切换不同的内容面板。

用法

切换器组件包含多个切换按钮及其相关内容项。将 uk-switcher 属性添加到包含切换按钮的列表元素中。将 .uk-switcher 类添加到包含内容项的元素中。

默认情况下，具有 .uk-switcher 类的元素必须直接位于切换按钮之后，才能使切换器正常工作。如果您需要将它嵌套在另一个元素中（例如，当使用网格时），请将 connect: SELECTOR 选项添加到 uk-switcher 属性中，并选择包含切换项的元素。

通常，切换器按钮通过其他组件进行样式设置，其中一些将在此处显示。

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

在此示例中，我们使用的是子导航组件。

- 项目
- 项目
- 项目
- 你好！
- 再次问好！
- 巴扎加！

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

在某些情况下，您希望从活动内容中切换到另一个内容部分。这可以使用 uk-switcher-item 属性实现。要定位项目，您需要将属性设置为相应内容项目的编号。

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

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

- 项目
- 项目
- 项目
- 你好！切换到项目 3
- 再次问好！下一个项目
- 巴扎加！上一个项目

<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 参数添加到 uk-switcher 属性中，并使用适用于所有项目的选择器即可。

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

- 活动
- 项目
- 项目
容器 1
- 你好！
- 再次问好！
- 巴扎加！
容器 2
- 你好！第一个项目。
- 再次问好！第二个项目。
- 巴扎加！第三个项目。

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

动画

您可以将动画组件中的所有动画应用于切换器项目。为此，请将包含相关类的 animation 参数添加到 uk-switcher 属性中。

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

- 项目
- 项目
- 项目
- 你好！
- 再次问好！
- 巴扎加！

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

多个动画

您也可以应用动画组件中的多个动画。这样，您可以添加不同的进出动画。

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

- 项目
- 项目
- 项目
- 你好！
- 再次问好！
- 巴扎加！

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

切换器和子导航

切换器很容易应用于子导航组件。

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

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

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

切换器和标签

作为规则的例外，将 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>

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

垂直标签

使用网格和宽度组件以正确的布局显示带有垂直标签式导航的内容。

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

活动

项目

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

切换器和按钮

切换器也可以应用于按钮组件中的按钮或按钮组。只需将切换器属性添加到包含按钮组的块中，或添加到具有 .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>

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

<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 选项更改触发内容切换的可点击元素。

切换器和导航

要将切换器应用于导航组件，请将 uk-switcher 属性添加到导航的 <ul> 元素中。使用网格和宽度组件将导航和内容排列在网格布局中。

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

- 活动
- 项目
- 项目
- 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">

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

组件选项

可以将任何这些选项应用于组件属性。用分号分隔多个选项。了解更多

选项	值	默认值	描述
`connect`	CSS 选择器	`~.uk-switcher`	相关项目容器。默认情况下，与具有 'uk-switcher' 类的元素相邻的元素。
`toggle`	CSS 选择器	`> * > :first-child`	选择触发内容切换的可点击元素。
`itemNav`	CSS 选择器	`false`	相关导航容器。默认情况下，导航项仅在相关项目容器中找到。
`active`	数字	`0`	初始化时的活动索引。提供负数表示从集合末尾开始的位置。
`animation`	字符串	`false`	动画的空格分隔名称。以逗号分隔表示动画退出。
`duration`	数字	`200`	动画持续时间。
`swiping`	布尔值	`true`	使用滑动。
`followFocus`	布尔值	`false`	选择自动跟随焦点。

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

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

JavaScript

了解更多关于 JavaScript 组件。

初始化

UIkit.switcher(element, options);

事件

以下事件将在附加此组件的元素的连接项目上触发

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

方法

以下方法可用于组件

显示

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

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

名称	类型	默认值	描述
`索引`	字符串、数字、节点	0	要显示的切换器项目。从 0 开始的索引。

无障碍

切换器组件遵循标签 WAI-ARIA 设计模式并自动设置适当的 WAI-ARIA 角色、状态和属性。

切换导航 具有 tablist 角色，如果它是一个导航组件，则 aria-orientation 状态设置为 vertical。
切换导航项 具有 presentation 角色。
切换导航链接 具有 ID、tab 角色、aria-selected 状态，并且 aria-controls 属性设置为相应内容项目的 ID。
内容列表 具有 presentation 角色。
内容列表项 具有 ID、tabpanel 角色，并且 aria-labelledby 属性设置为相应切换项的 ID。

键盘交互

可以使用以下键通过键盘访问切换导航。

tab 或 shift+tab 键将焦点置于切换导航中的活动切换按钮上。如果焦点已经位于活动切换按钮上，则焦点将移动到切换导航之外的下一个元素。
左/右箭头 或 上/下箭头 键（取决于方向）在切换按钮之间导航。如果焦点位于最后一个切换按钮上，则它将移动到第一个切换按钮。
enter 或 space 键激活与已聚焦的切换按钮相对应的内容项目。
home 或 end 键将焦点移动到第一个或最后一个切换按钮。

默认情况下，切换器组件具有手动激活行为。这意味着相应的内容项将仅使用 enter 或 space 键激活。要切换到自动激活，请将 follow-focus 设置为 true。当在切换项之间导航时，相应的内容项将自动变为活动状态。

文档

切换器

用法

导航控制