选项卡

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

用法

选项卡组件由并排对齐的可点击选项卡组成。

data-uk-tab 属性有两个用途。首先，它启用响应式行为。如果父容器太小而无法容纳所有选项卡，它们将被合并到一个下拉列表中，该下拉列表由一个代表活动选项卡项的单个选项卡切换。这还需要 下拉菜单组件 才能工作。

其次，它的功能与 切换器组件 相关联，这对于使用选项卡式导航动态地在不同内容之间切换是必要的。

示例

• 活动
• 项目
• 项目
• 禁用

标记

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

水平修饰符

添加以下类之一来更改选项卡的样式。这些修饰符也可以组合使用。

对齐选项卡

示例

标记

<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-* 类之一到列表项，以在网格中排列选项卡，该网格占据其父元素的完整宽度。

示例

标记

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

居中选项卡

在选项卡式导航周围的 <div> 元素中添加 .uk-tab-center 类以使选项卡居中。如果您在选项卡上使用底部修饰符，还需将 .uk-tab-center-bottom 类添加到周围的 <div> 元素以调整边框。

示例

标记

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

垂直修饰符

添加 .uk-tab-left 或 .uk-tab-right 类以将选项卡垂直对齐到左侧或右侧。

示例

标记

<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 属性将应用与水平选项卡相同的响应式行为。

带有下拉菜单的选项卡

这是一个如何使用带有 下拉菜单组件 的选项卡的示例。

示例

• 活动
• 项目
• 项目
• 更多
  • 项目
  • 另一个项目
  • 标题
  • 项目
  • 另一个项目
  • 分隔的项目

标记

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

    <!-- This is the container enabling the JavaScript -->
    <li data-uk-dropdown="{mode:'click'}">

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

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
            </ul>
        </div>
    </li>
</ul>

事件

您可以将回调绑定到以下事件以实现自定义功能