Tab

创建具有不同样式的选项卡式导航。

用法

Tab 组件由可点击的选项卡组成，它们在列表中并排排列。它的 JavaScript 功能扩展了切换器组件，是通过选项卡式导航动态切换不同内容所必需的。

Class/Attribute	描述
`uk-tab`	将此属性添加到 `<ul>` 元素以定义 Tab 组件。列表内的 `<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>

Active
Item
More
- Active
- Item
- Header
- Item
- Item
- Item

<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 selector	`false`	关联项所在的容器。默认情况下是下一个带 'uk-switcher' 类的元素。
`toggle`	CSS selector	`> *`	触发切换的选择器，点击时触发内容切换。
`active`	Number	`0`	初始化时的激活索引。提供负数表示从集合末尾开始计数的位置。
`animation`	String	`false`	以空格分隔的动画名称。以逗号分隔表示退出动画。
`duration`	Number	`200`	动画持续时间。
`swiping`	Boolean	`true`	是否启用滑动。
`media`	Number, String	`960`	水平模式的条件——可以是整数宽度（例如 640）、断点（例如 @s、@m、@l、@xl），或任何合法的媒体查询（例如 (min-width: 900px)）。

JavaScript

了解更多关于 JavaScript 组件的信息。

初始化

UIkit.tab(element, options);

事件

以下事件会在添加了该组件的元素的关联项上触发：

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

方法

该组件提供以下方法：

Show

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

显示指定索引的 Tab 项。

名称	类型	默认	描述
`index`	String, Number, Node	0	要显示的 Tab 项。索引从 0 开始。

可访问性

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

选项卡导航具有 tablist 角色；如果它是导航组件，则 aria-orientation 状态会被设为 vertical。
选项卡导航项具有 presentation 角色。
选项卡导航链接具有 ID、tab 角色、aria-selected 状态，以及指向相应内容项 ID 的 aria-controls 属性。
内容列表具有 presentation 角色。
内容列表项具有 ID、tabpanel 角色，以及指向相应选项卡 ID 的 aria-labelledby 属性。

键盘交互

可以通过键盘使用以下按键访问选项卡导航。

tab 或 shift+tab 键把焦点置于选项卡导航的激活选项卡上。如果焦点已经在激活选项卡上，焦点将移出选项卡导航，落到下一个元素上。
left/right arrow 或 up/down arrow 键（取决于方向）在选项卡之间导航。如果焦点在最后一个选项卡上，它会移到第一个选项卡。
enter 或 space 键激活所聚焦选项卡对应的内容项。
home 或 end 键把焦点移到第一个或最后一个选项卡。

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

文档

Tab