选项卡

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

使用

选项卡组件由可点击的选项卡组成，这些选项卡在列表中并排排列。其 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);

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

名称	类型	默认	描述
`索引`	字符串，数字，节点	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。在选项卡项之间导航时，相应的内容项将自动激活。

文档

选项卡