快速开始 主题配置
容器
布局 Layout 容器 Docker 定位 Position 外边距 Margin 内边距 Padding 溢出 Overflow
元素
颜色 Color 文字 Font 图标 Icon 图片 Image 按钮 Button 提示 Tip 标签 Tag 徽标 Badge 表格 Table 菜单 Menu 面包屑 Breadcrumb 选项卡 Tab 分页 Pagination 阴影 Shadow
组件
表单 Form 输入框 Input 文本域 Textarea 单选框 Radio 多选框 Checkbox 选择器 Select 计数器 Counter 折叠面板 Collapse 模态框 Modal 动画 Animation
作者
问题反馈

选项卡 Tab

概述

基础组件,触发业务逻辑时使用。

基础选项卡

设置类j-tags定义选项卡Tab,Content结构样式允许自由定义。如:

<div class="j-tabs is-top">
    <div class="j-tabs-header is-top">
        <div class="j-tabs-nav is-top">
            <div class="j-tabs-item">选项一</div>
            <div class="j-tabs-item is-active">选项二</div>
            <div class="j-tabs-item">选项三</div>
        </div>
    </div>
    <div class="j-tabs-content">
      Content:我是基本选项卡
    </div>
</div>
选项一
选项二
选项三
Content:我是基本选项卡
不同方向

设置类is-*定义选项卡的方向。*为方向值,包括4个:topleftrightbottom

<div class="j-tabs is-top">
    <div class="j-tabs-header is-top">
        <div class="j-tabs-nav is-top">
            <div class="j-tabs-item">选项一</div>
            <div class="j-tabs-item is-active">选项二</div>
            <div class="j-tabs-item">选项三</div>
        </div>
    </div>
    <div class="j-tabs-content">
      Content:我是基本选项卡is-top
    </div>
</div>
选项一
选项二
选项三
Content:我是基本选项卡is-top
选项一
选项二
选项三
Content:我是基本选项卡is-bottom
选项一
选项二
选项三
Content:我是基本选项卡is-left
选项一
选项二
选项三
Content:我是基本选项卡is-right
基础卡片选项卡

设置类is-card定义基础卡片选项卡。Content结构样式允许自由定义。

<div class="j-tabs is-top is-card">
    <div class="j-tabs-header is-top">
        <div class="j-tabs-nav is-top">
            <div class="j-tabs-item">选项一</div>
            <div class="j-tabs-item is-active">选项二</div>
            <div class="j-tabs-item">选项三</div>
        </div>
    </div>
    <div class="j-tabs-content">
      Content:我是卡片选项卡is-top
    </div>
</div>
选项一
选项二
选项三
Content:我是卡片选项卡is-top
选项一
选项二
选项三
Content:我是卡片选项卡is-bottom
选项一
选项二
选项三
Content:我是卡片选项卡is-left
选项一
选项二
选项三
Content:我是卡片选项卡is-right
高级卡片选项卡

设置类is-card-advanced定义高级卡片选项卡。这是附带主题样式的卡片选项卡,也是自定义主题的示例,你也可以自定义父级标签的类或选择器,来自定义主题样式。

<div class="j-tabs is-top is-card-advanced">
    <div class="j-tabs-header is-top">
        <div class="j-tabs-nav is-top">
            <div class="j-tabs-item">选项一</div>
            <div class="j-tabs-item is-active">选项二</div>
            <div class="j-tabs-item">选项三</div>
        </div>
    </div>
    <div class="j-tabs-content">
      Content:我是高级卡片选项卡is-top
    </div>
</div>
选项一
选项二
选项三
Content:我是高级卡片选项卡is-top
选项一
选项二
选项三
Content:我是高级卡片选项卡is-bottom
选项一
选项二
选项三
Content:我是高级卡片选项卡is-left
选项一
选项二
选项三
Content:我是高级卡片选项卡is-right
图标选项

为选项增加图标:在选项文本,以行内元素的方式引入图标元素。

<div class="j-tabs is-top is-card-advanced">
    <div class="j-tabs-header is-top">
        <div class="j-tabs-nav is-top">
            <div class="j-tabs-item">选项一</div>
            <div class="j-tabs-item is-active">
                <span><i class="iconfont icon_star"></i> 选项二</span>
            </div>
            <div class="j-tabs-item">选项三</div>
        </div>
    </div>
    <div class="j-tabs-content">
      Content
    </div>
</div>
选项一
选项二
选项三
Content
删除交互

为选项增加图标:在选项文本后,以行内元素的方式引入交互元素。

<div class="j-tabs is-top is-card-advanced">
    <div class="j-tabs-header is-top">
        <div class="j-tabs-nav is-top">
            <div class="j-tabs-item">选项一</div>
            <div class="j-tabs-item is-active">
                 <span>选项二</span>
                <span class="j-tabs-item-close iconfont icon_close"></span>
            </div>
            <div class="j-tabs-item">选项三</div>
        </div>
    </div>
    <div class="j-tabs-content">
      Content
    </div>
</div>
选项一
选项二
选项三
Content
上一章:面包屑 Breadcrumb
下一章:分页 Pagination