选项卡

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

用法

选项卡组件由一些并列的可点击选项卡标签组成。

data-uk-tab 属性为两个目的提供支持。其一，它使得响应式行为成为可能。如果父容器太小而不能容纳所有的选项卡标签，它们将会合并到一个下拉菜单中，并由一个独立的默认选项卡作为拨动器。这里就需要用到 下拉菜单组件 了。

第二，它的功能耦合了 切换器组件,这是使用选项卡导航切换不同内容所必须的。

示例

• Active
• Item
• Item
• Disabled

Code

<ul class="uk-tab" data-uk-tab>
    <li class="uk-active"><a href="">...</a></li>
    <li><a href="">...</a></li>
    <li><a href="">...</a></li>
    <li class="uk-disabled"><a href="">...</a></li>
</ul>

水平方向的修饰

添加下列类中的一个，用来改变选项卡的外观。这些修饰类可以组合使用。

选项卡的对齐

示例

Code

<ul class="uk-tab uk-tab-flip" data-uk-tab>...</ul>
<ul class="uk-tab uk-tab-bottom" data-uk-tab>...</ul>

调整选项卡标签

添加 .uk-tab-grid 类和一个 网格组件 中的 .uk-width-* 类，把选项卡标签放入网格中，使它的宽度与父元素宽度一致。

示例

Code

<ul class="uk-tab uk-tab-grid uk-tab-bottom" data-uk-tab>
    <li class="uk-width-1-3"><a href="">...</a></li>
</ul>

选项卡标签居中

添加 .uk-tab-center 类到包含选项卡的 <div> 元素中，使选项卡居中。

示例

Code

<div class="uk-tab-center">
    <ul class="uk-tab" data-uk-tab>...</ul>
</div>

垂直方向的修饰

添加 .uk-tab-left 或 .uk-tab-right 类，将选项卡放置在左边或者右边。

示例

Code

<ul class="uk-tab uk-tab-left uk-width-medium-1-2">
    <li>...</li>
</ul>

<ul class="uk-tab uk-tab-right uk-width-medium-1-2">
    <li>...</li>
</ul>

响应式行为

在狭窄的视口中，比如手机，垂直的选项卡会变成水平。添加 data-uk-tab 属性将为水平排列的选项卡赋予相同的响应行为。

含有下拉菜单的选项卡

这个例子是关于怎样使用带有 下拉菜单组件的选项卡。

示例

• Active
• Item
• Item
• More
  • Item
  • Another item
  • Header
  • Item
  • Another item
  • Separated item

Code

<ul class="uk-tab">
    <li><a href="">...</a></li>

    <!-- 关联JavaScript的容器 -->
    <li data-uk-dropdown="{mode:'click'}">

        <!-- 拨动下拉菜单的元素 -->
        <a href="">...</a>

        <!-- 下拉菜单 -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
            </ul>
        </div>
    </li>
</ul>

事件

你可以为以下事件绑定回调，以实现自定义功能：