UIkit3.x文档

Tab选项卡

创建具有各种样式的选项卡导航。

用法

选项卡组件由多个可点击的选项卡组成，这些选项卡在列表中水平排列。它的JavaScript功能继承自Switcher组件,必须要有 JS 功能才能切换不同tab标签页的内容。

Class/Attribute Description
uk-tab 添加到<ul>元素中以定义选项卡组件。使用<a>元素作为列表中的选项卡项。
.uk-active 添加到列表项以应用活动状态。
.uk-disabled 添加到列表项应用禁用状态。同时从锚点中移除ref属性，以使其无法通过键盘导航访问。 
<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 class以将选项卡项翻转到底部。

<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 class以使选项卡在左侧或右侧垂直对齐。为了节省空间，当视口宽度宽度低于960px时，对齐方式将自动变回水平对齐。

使用垂直对齐时，通常会使用网格来设置布局，如下面这个Switcher 示例所示。

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

对齐

可以将选项卡与Flex 组件 或Width 组件结合使用来修改导航标签的对齐方式。

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

选项卡和下拉菜单

选项卡可用于触发Dropdown 组件中的下拉菜单。

<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 class="uk-margin-small-left" 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>

组件选项

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

Option Value Default Description
connect CSS selector false 被关联的项目容器。默认情况下，是u'uk-switcher' class的下一个元素。
toggle CSS selector > * 切换选择器，点击时触发内容切换。
active Number 0 初始化时活动单元的索引值。设为负数表示从集合末尾开始的位置。
animation String false 用空格分隔的要使用的动画名称，隐藏时的动画需要用逗号分隔开。
duration Number 200 动画持续时间。
swiping Boolean true 使用滑动。
media Integer, String 960 何时切换到水平模式-宽度为整数（例如640）或断点（例如@ s，@ m，@ l，@ xl）或任何有效的媒体查询（例如（最小宽度：900px））。

JavaScript

了解更多关于JavaScript 组件的内容。

初始化

UIkit.tab(element, options);

事件

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

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

方法

以下方法可用于该组件：

Show

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

显示具有给定索引的Tab项目。

Name Type Default Description
index String, Integer, Node 0 要显示的选项卡项。从0开始的索引。