切换器

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

用法

切换器组件由多个切换器及其相关的内容项组成。将 data-uk-switcher="{connect:'#ID'}" 属性添加到包含切换器的元素中，目标与包含内容项的元素上使用的 ID 相同。将 .uk-switcher 类添加到同一个元素。通常，切换器与其他组件结合使用，这里将展示其中一些。

示例

• 项目
• 项目
• 项目

• 你好！
• 又见面了！
• 巴辛加！

标记

<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

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

从内容中切换项目

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

示例

标记

<!-- This is the nav containing the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
    <li> ... <a href="" data-uk-switcher-item="0">...</a></li>
    <li> ... <a href="" data-uk-switcher-item="1">...</a></li>
</ul>

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

标记

<li> ... <a href="" data-uk-switcher-item="next">...</a></li>
<li> ... <a href="" data-uk-switcher-item="previous">...</a></li>

连接多个项目

还可以连接多个内容容器。只需使用其他容器的 ID 扩展 connect 参数即可。

示例

标记

<!-- This is the nav containing the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id-one, #my-id-two'}">
    <li><a href="">...</a></li>
</ul>

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

<ul id="my-id-two" class="uk-switcher">
    <li>...</li>
</ul>

动画

切换器组件允许您在切换项目时向其添加不同的动画。您只需将 animation 参数添加到数据属性并定义要应用的动画。请查看下表，了解提供的动画概述。

示例

标记

<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id', animation: 'fade'}">
    <li><a href="">...</a></li>
</ul>

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

自定义动画

您还可以使用来自动画组件的 uk-animation-* 类来应用多个动画。这样，您甚至可以创建自己的自定义类，以将不同的过渡效果应用于切换器。

示例

• 标签页
• 标签页
• 标签页

• 你好！
• 又见面了！
• 巴辛加！

标记

<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id', animation: 'uk-animation-fade, uk-animation-slide-left'}">
    <li><a href="">...</a></li>
</ul>

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

带有子导航的切换器

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

示例

• 项目
• 项目
• 项目

• 你好！
• 又见面了！
• 巴辛加！

标记

<!-- This is the subnav containing the toggling elements -->
<ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

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

带有选项卡的切换器

作为规则的例外，将 data-uk-tab="{connect:'#ID'}" 属性添加到选项卡式导航，使用参数“tab”而不是“switcher”，将切换器与标签页组件组合起来。

示例

标记

<!-- This is the tabbed navigation containing the toggling elements -->
<ul class="uk-tab" data-uk-tab="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher uk-margin">
    <li>...</li>
</ul>

注意当使用底部选项卡修饰符时，导航和内容需要以相反的顺序排列，以便内容显示在选项卡之上。

垂直选项卡

使用栅格组件来正确显示具有垂直选项卡式导航的内容。

示例

示例

<!-- This is the left vertical tabbed navigation -->
<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <!-- This is the vertical tabbed navigation containing the toggling elements -->
        <ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#my-id'}">...</ul>
    </div>
    <div class="uk-width-medium-1-2">
        <!-- This is the container of the content items -->
        <ul id="my-id" class="uk-switcher">...</ul>
    </div>
</div>

<!-- This is the right vertical tabbed navigation -->
<div class="uk-grid">
    <div class="uk-width-medium-1-2 uk-push-1-2">
        <!-- This is the vertical tabbed navigation containing the toggling elements -->
        <ul class="uk-tab uk-tab-right" data-uk-tab="{connect:'#my-id'}">...</ul>
    </div>
    <div class="uk-width-medium-1-2 uk-pull-1-2">
        <!-- This is the container of the content items -->
        <ul id="my-id" class="uk-switcher">...</ul>
    </div>
</div>

带有按钮的切换器

切换器还可以应用于来自按钮组件的按钮或按钮组。只需将切换器数据属性添加到按钮组周围的 <div> 元素或具有 .button-group 类的元素即可。

示例

标记

<!-- This is the container of the toggling buttons -->
<div data-uk-switcher="{connect:'#my-id'}">
    <button class="uk-button" type="button">...</button>
</div>

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

<!-- This is the button group containing the toggling buttons -->
<div class="uk-button-group" data-uk-switcher="{connect:'#my-id'}">
    <button class="uk-button" type="button">...</button>
</div>

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

带有导航的切换器

要将切换器应用于导航组件，请将数据属性添加到导航 <ul>。使用栅格组件以网格布局排列导航和内容。

示例

标记

<div class="uk-grid">
    <div class="uk-width-medium-1-4">

        <!-- This is the nav containing the toggling elements -->
        <ul class="uk-nav uk-nav-side" data-uk-switcher="{connect:'#my-id'}">
            <li><a href="">...</a></li>
        </ul>
    </div>
    <div class="uk-width-medium-3-4">

        <!-- This is the container of the content items -->
        <ul id="my-id" class="uk-switcher">
            <li>...</li>
        </ul>
    </div>
</div>

JavaScript 选项

这是一个如何通过属性设置选项的示例

data-uk-switcher="{active:1}"

事件

您可以将回调绑定到以下事件以实现自定义功能

示例

$('[data-uk-switcher]').on('show.uk.switcher', function(event, area){
    console.log("Switcher switched to ", area);
});