跳到主要内容

文档

标签

使用不同的样式创建选项卡式导航。

用法

标签组件由可点击的选项卡组成，这些选项卡并排排列在列表中。它的 JavaScript 功能扩展了 切换器组件，并且是动态切换使用选项卡式导航的不同内容所必需的。

类/属性 描述
uk-tab 将此属性添加到 <ul> 元素以定义标签组件。在列表中使用 <a> 元素作为标签项。
.uk-active 将此类添加到列表项以应用活动状态。
.uk-disabled 将此类添加到列表项以应用禁用状态。还要从锚点删除 href 属性，使其无法通过键盘导航访问。 
<ul uk-tab>
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
    <li class="uk-disabled"><a></a></li>
</ul>
<ul uk-tab>
    <li class="uk-active"><a href="#">Left</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li class="uk-disabled"><a>Disabled</a></li>
</ul>

底部修饰符

添加 .uk-tab-bottom 类将选项卡项翻转到底部。

<ul class="uk-tab-bottom" uk-tab>…</ul>
<ul class="uk-tab-bottom" uk-tab>
    <li class="uk-active"><a href="#">Left</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

左/右修饰符

添加 .uk-tab-left 或 .uk-tab-right 类将选项卡垂直对齐到左侧或右侧。为了节省空间，当视口宽度低于 960px 时，对齐会自动切换回水平。

使用垂直对齐时，通常会创建一个网格来应用布局，如 切换器示例中所示。

<ul class="uk-tab-left" uk-tab>…</ul>

<ul class="uk-tab-right" uk-tab>…</ul>
<div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <ul class="uk-tab-left" uk-tab>
            <li class="uk-active"><a href="#">Left</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

    <div>
        <ul class="uk-tab-right" uk-tab>
            <li class="uk-active"><a href="#">Right</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

响应式

要更改垂直和水平对齐之间的默认断点，只需将 media 选项与相应的视口宽度一起应用于属性。添加以像素为单位的数字，例如 media: 640，或一个断点，例如 media: @m。

<ul class="uk-tab-left" uk-tab="media: @s">…</ul>

对齐

您可以将标签与 弹性布局组件或 宽度组件组合使用，以修改导航的对齐方式。

<ul class="uk-flex-right" uk-tab>…</ul>
<div class="uk-margin-medium-top">
    <ul class="uk-flex-center" uk-tab>
        <li class="uk-active"><a href="#">Center</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

<div>
    <ul class="uk-flex-right" uk-tab>
        <li class="uk-active"><a href="#">Right</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

<div>
    <ul class="uk-child-width-expand" uk-tab>
        <li class="uk-active"><a href="#">Justify</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

标签和下拉菜单

标签可用于从 下拉菜单组件触发下拉菜单。

<ul uk-tab>
    <li>

        <!-- This is the menu item toggling the dropdown -->
        <a href=""></a>

        <!-- This is the dropdown -->
        <div uk-dropdown="mode: click">
            <ul class="uk-nav uk-dropdown-nav">…</ul>
        </div>

    </li>
</ul>
<ul uk-tab>
    <li class="uk-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li>
        <a href>More <span uk-icon="icon: triangle-down"></span></a>
        <div uk-dropdown="mode: click">
            <ul class="uk-nav uk-dropdown-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </li>
</ul>

组件选项

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

选项 值 默认 描述
connect CSS 选择器 false 相关项目的容器。默认情况下，这是具有“uk-switcher”类的下一个元素。
toggle CSS 选择器 > * 触发单击时内容切换的切换选择器。
active 数字 0 初始化时的活动索引。提供负数表示从集合末尾开始的位置。
animation 字符串 false 动画的空格分隔名称。用于动画输出的逗号分隔。
duration 数字 200 动画持续时间。
swiping 布尔值 true 使用滑动。
media 数字，字符串 960 何时切换到水平模式 - 作为整数的宽度（例如 640）或断点（例如 @s、@m、@l、@xl）或任何有效的媒体查询（例如 (min-width: 900px)）。

JavaScript

了解更多关于 JavaScript 组件。

初始化

UIkit.tab(element, options);

事件

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

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

方法

以下方法可用于该组件

显示

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

显示具有给定索引的选项卡项。

名称 类型 默认 描述
index 字符串，数字，节点 0 要显示的选项卡项。基于 0 的索引。

无障碍性

标签组件遵循 标签 WAI-ARIA 设计模式，并自动设置相应的 WAI-ARIA 角色、状态和属性。

键盘交互

可以使用以下键通过键盘访问标签导航。

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