切换器

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

用法

切换器组件由多个触发器和它们相关的内容项组成。将 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 -->
<div class="uk-switcher">
    <div></div>
</div>

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

你好！

再次你好！

巴辛加！

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

你好！切换到项目 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>
<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>

连接多个容器

还可以连接多个内容容器。只需将 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 -->
<div class="uk-switcher my-class">…</div>

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

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

<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 属性。

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

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

多个动画

您还可以应用来自动画组件的多个动画。这样，您可以添加不同的入场和出场动画。

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

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

切换器和子导航

切换器可以轻松应用于子导航组件。

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

切换器和选项卡

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

垂直选项卡

使用网格和宽度组件可以正确显示带有垂直选项卡式导航的内容。

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

切换器和按钮

切换器也可以应用于按钮组件中的按钮或按钮组。只需将切换器属性添加到一组按钮周围的块或带有 .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 选项来更改触发内容切换的可点击元素。

切换器和导航

要将切换器应用于导航组件，请将 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">
        <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 选择器	`~.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);

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

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

可访问性

切换器组件遵循 Tab 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 或 空格 键激活焦点切换器的相应内容项。
home 或 end 键将焦点移动到第一个或最后一个切换器。

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

文档

切换器

用法

导航控件

连接多个容器

容器 1

容器 2

动画

多个动画

切换器和子导航

切换器和选项卡

垂直选项卡

切换器和按钮

切换器和导航

组件选项

JavaScript

初始化

事件

方法

显示

可访问性

键盘交互