diff --git a/docs/.layui/examples/demo.md b/docs/.layui/examples/demo.md
index f6eebb5e..30e2a9fd 100644
--- a/docs/.layui/examples/demo.md
+++ b/docs/.layui/examples/demo.md
@@ -1,5 +1,3 @@
-
-
-
-
-示例标题
-
-
-
-
\ No newline at end of file
diff --git a/docs/tabs/detail/demo.md b/docs/tabs/detail/demo.md
new file mode 100644
index 00000000..a46dd138
--- /dev/null
+++ b/docs/tabs/detail/demo.md
@@ -0,0 +1,51 @@
+
+
+
+
+方法渲染
+
+即通过方法设置 tabs 标签，而非默认的自动渲染页面中的 `class="layui-tabs"` 的容器模板。
+
+
+
+
+
+卡片风格
+
+
+
+
+
+HASH 状态匹配
+
+切换 tabs 标签项后，地址栏同步 `hash` 值，当页面刷新时，tabs 仍保持对应的切换状态。
+
+
+
+
+
+标签嵌套
+
+
+
+
+
+给任意元素添加 Tab 功能
+
+
+
+
diff --git a/docs/tabs/detail/options.md b/docs/tabs/detail/options.md
new file mode 100644
index 00000000..45401761
--- /dev/null
+++ b/docs/tabs/detail/options.md
@@ -0,0 +1,98 @@
+
+
+
+
+
+ 属性名
+ 描述
+ 类型
+ 默认值
+
+
+
+
+elem
+
+
+绑定元素选择器或 DOM 对象
+
+
+string/DOM
+-
+
+
+header
+
+
+选项卡的标题列表，可以是一个包含标题文本的数组，也可以是一个包含标题对象的数组。标题对象支持以下属性：
+- `title` 标题文本
+- `id` 标题唯一索引
+- `disabled` 是否禁用
+
+
+array
+-
+
+
+body
+
+
+选项卡的内容列表，可以是一个包含内容文本的数组，也可以是一个包含内容对象的数组。内容对象支持以下属性：
+- `content` 内容文本
+- `id` 内容唯一索引
+
+
+array
+-
+
+
+index
+
+
+初始选中的选项卡索引
+
+
+number
+
+
+`0`
+
+
+
+
+closable
+
+
+是否允许选项卡被关闭
+
+
+boolean
+
+
+`false`
+
+
+
+
+headerMode
+
+
+选项卡标题栏的展现模式。可选值：
+- `default` 默认模式
+- `brief` 简约模式
+- `card` 卡片模式
+
+
+string
+
+
+`default`
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/tabs/examples/card.md b/docs/tabs/examples/card.md
new file mode 100644
index 00000000..ba3545cb
--- /dev/null
+++ b/docs/tabs/examples/card.md
@@ -0,0 +1,54 @@
+普通卡片：
+
+
+
+
+
内容-1
+
内容-2
+
内容-3
+
内容-4
+
内容-5
+
内容-6
+
+
边框卡片：
+
+
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
2
+
3
+
4
+
5
+
6
+
+
+
+
+
+
内容 111
+
内容 222
+
内容 333
+
+
+
+
+
Tab Content-1
+
Tab Content-2
+
Tab Content-3
+
Tab Content-4
+
Tab Content-5
+
Tab Content-6
+
+
+ 切换到：Tab3
+ 切换到：第 2 项
+ 关闭：Tab4
+ 关闭：第 2 项
+ 添加 Tab
+
+
+
+
diff --git a/docs/tabs/examples/method.md b/docs/tabs/examples/method.md
new file mode 100644
index 00000000..8743753b
--- /dev/null
+++ b/docs/tabs/examples/method.md
@@ -0,0 +1,26 @@
+
+
+
+
diff --git a/docs/tabs/examples/nest.md b/docs/tabs/examples/nest.md
new file mode 100644
index 00000000..95f501a6
--- /dev/null
+++ b/docs/tabs/examples/nest.md
@@ -0,0 +1,40 @@
+
+
+
diff --git a/docs/tabs/index.md b/docs/tabs/index.md
new file mode 100644
index 00000000..b22fd784
--- /dev/null
+++ b/docs/tabs/index.md
@@ -0,0 +1,127 @@
+---
+title: 标签页组件 tabs
+toc: true
+---
+
+# 标签页组件 2.10+
+
+> `tabs` 是 2.10 版本新增的加强型组件，用于替代原 `element` 模块中的 `tab` 组件。tabs 广泛应用于 Web 页面。
+
+示例
+
+
+{{- d.include("/tabs/detail/demo.md") }}
+
+
+API
+
+该组件继承 `component` 提供的[基础接口](../component/#inherit)，并在此基础上为组件专门扩展了以下接口：
+
+| API | 描述 |
+| --- | --- |
+| var tabs = layui.tabs | 获得 `tabs` 模块。|
+| [tabs.render(options)](#render) | tabs 组件渲染，核心方法。|
+| [tabs.add(id, options)](#add) | 新增一个标签项。|
+| [tabs.close(id, index)](#close) | 关闭指定的标签项。|
+| [tabs.closeMore(id, type, index)](#closeMore) | 批量关闭标签项。|
+| [tabs.change(id, index)](#change) | 切换到指定的标签项。|
+| [tabs.data(id)](#data) | 获取当前标签页信息。|
+| [tabs.headerItem(id, index)](#headerItem) | 获取指定的标签头部项。|
+| [tabs.bodyItem(id, index)](#bodyItem) | 获取指定的标签内容项。|
+| [tabs.setView(id)](#setView) | 重新调整标签视图结构。|
+
+渲染
+
+`tabs.render(options);`
+
+- 参数 `options` : 基础属性配置项。[#详见属性](#options)
+
+tabs 组件会在元素加载完毕后，默认自动对 `class="layui-tabs"` 目标元素完成一次渲染，如果无法找到默认的目标元素，可使用该方法完成标签的初始化渲染。
+
+属性
+
+
+{{- d.include("/tabs/detail/options.md") }}
+
+
+新增标签
+
+`tabs.add(id, options);`
+
+- 参数 `id` : tabs 容器的唯一 id 标识
+- 参数 `options` : 标签配置项
+ ```js
+ {
+ title: '标题', // 标签标题
+ content: '内容', // 标签内容
+ id: 'xxx', // 标签的 lay-id 属性值
+ mode: 'append', // 插入模式。可选值: append/prepend/curr
+ unclosed: true, // 是否禁止关闭。默认 false
+ done: function(obj){} // 标签添加完毕的回调
+ }
+ ```
+
+关闭标签
+
+`tabs.close(id, index);`
+
+- 参数 `id` : tabs 容器的唯一 id 标识
+- 参数 `index` : 标签项的索引或 lay-id 属性值
+
+批量关闭标签
+
+`tabs.closeMore(id, type, index);`
+
+- 参数 `id` : tabs 容器的唯一 id 标识
+- 参数 `type` : 关闭类型。可选值：
+ - `'all'` : 关闭所有标签
+ - `'other'` : 关闭其他标签
+ - `'left'` : 关闭左侧标签
+ - `'right'` : 关闭右侧标签
+- 参数 `index` : 标签项的索引或 lay-id 属性值，用于定位基准点
+
+切换标签
+
+`tabs.change(id, index);`
+
+- 参数 `id` : tabs 容器的唯一 id 标识
+- 参数 `index` : 标签项的索引或 lay-id 属性值
+
+获取标签信息
+
+`tabs.data(id);`
+
+- 参数 `id` : tabs 容器的唯一 id 标识
+- 返回值：包含当前标签页信息的对象
+ ```js
+ {
+ index: 0, // 当前标签项的索引
+ prevIndex: -1, // 上一个标签项的索引
+ headerElem: {}, // 当前标签头部元素
+ bodyElem: {} // 当前标签内容元素
+ }
+ ```
+
+
+
+`tabs.headerItem(id, index);`
+
+- 参数 `id` : tabs 容器的唯一 id 标识
+- 参数 `index` : 标签项的索引或 lay-id 属性值
+- 返回值：标签头部项的 DOM 元素
+
+获取标签内容项
+
+`tabs.bodyItem(id, index);`
+
+- 参数 `id` : tabs 容器的唯一 id 标识
+- 参数 `index` : 标签项的索引或 lay-id 属性值
+- 返回值：标签内容项的 DOM 元素
+
+重新调整视图
+
+`tabs.setView(id);`
+
+- 参数 `id` : tabs 容器的唯一 id 标识
+- 描述：用于重新调整标签视图结构，如在容器尺寸变化时调用
+
diff --git a/src/css/layui.css b/src/css/layui.css
index 536e2863..a2ac0fab 100644
--- a/src/css/layui.css
+++ b/src/css/layui.css
@@ -1328,7 +1328,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
.layui-tabs-header{position: relative; left: 0; height: 40px; white-space: nowrap; font-size: 0; transition: all .16s; -webkit-transition: all .16s;}
.layui-tabs-header:after,
.layui-tabs-scroll:after{content: ""; position: absolute; left: 0; bottom: 0; z-index: 0; width: 100%; border-bottom: 1px solid #eee;}
-.layui-tabs-header li{position: relative; display: inline-block; vertical-align: middle; line-height: 40px; padding: 0 16px; text-align: center; cursor: pointer; font-size: 14px; transition: all .16s; -webkit-transition: all .16s;}
+.layui-tabs-header li{position: relative; display: inline-block; vertical-align: middle; line-height: 40px; margin: 0 !important; padding: 0 16px; text-align: center; cursor: pointer; font-size: 14px; transition: all .16s; -webkit-transition: all .16s;}
.layui-tabs-header li:first-child{margin-left: 0;}
.layui-tabs-header li a{display: block; padding: 0 16px; margin: 0 -16px;}
.layui-tabs-header .layui-this{color: #16baaa;}
diff --git a/src/modules/code.js b/src/modules/code.js
index dc4a795a..93f3e84b 100644
--- a/src/modules/code.js
+++ b/src/modules/code.js
@@ -3,12 +3,13 @@
* Code 预览组件
*/
-layui.define(['lay', 'util', 'element', 'form'], function(exports){
+layui.define(['lay', 'util', 'element', 'tabs', 'form'], function(exports){
"use strict";
var $ = layui.$;
var util = layui.util;
var element = layui.element;
+ var tabs = layui.tabs;
var form = layui.form;
var layer = layui.layer;
var hint = layui.hint();
@@ -403,6 +404,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
render: function(){
form.render(thisItemBody.find('.layui-form'));
element.render();
+ tabs.render();
}
});
},3);
diff --git a/src/modules/tabs.js b/src/modules/tabs.js
index 37e07394..7869fb54 100644
--- a/src/modules/tabs.js
+++ b/src/modules/tabs.js
@@ -564,14 +564,24 @@ layui.define('component', function(exports) {
// 扩展组件接口
$.extend(component, {
- // 增加标签
+ /**
+ * 增加标签
+ * @param {string} id - 标签 ID
+ * @param {object} obj - 标签配置信息
+ * @returns
+ */
add: function(id, obj) {
var that = component.getThis(id);
if(!that) return this;
that.add(obj);
},
- // 关闭单个标签
+ /**
+ * 关闭标签
+ * @param {string} id - 标签 ID
+ * @param {number} index - 标签下标
+ * @returns
+ */
close: function(id, index) {
var that = component.getThis(id);
if(!that) return this;
@@ -579,39 +589,68 @@ layui.define('component', function(exports) {
that.close(that.findHeaderItem(index));
},
- // 关闭多个标签。若传 index，则按 index 所在标签为事件执行关闭操作
+ /**
+ * 关闭多个标签
+ * @param {string} id - 标签 ID
+ * @param {string} type - 关闭类型，可选值：left、right、other、all
+ * @param {number} index - 标签下标。若传入，则按 index 所在标签为事件执行关闭操作
+ * @returns
+ */
closeMore: function(id, type, index) {
var that = component.getThis(id);
if(!that) return this;
that.closeMore(type, index);
},
- // 切换标签
+ /**
+ * 切换标签
+ * @param {string} id - 标签 ID
+ * @param {number} index - 标签下标
+ * @returns
+ */
change: function(id, index) {
var that = component.getThis(id);
if(!that) return this;
that.change(that.findHeaderItem(index));
},
- // 获取标签信息
+ /**
+ * 获取标签信息
+ * @param {string} id - 标签 ID
+ * @returns
+ */
data: function(id) {
var that = component.getThis(id);
return that ? that.data() : {};
},
- // 获取标签指定头部项
+ /**
+ * 获取标签指定头部项
+ * @param {string} id - 标签 ID
+ * @param {number} index - 标签下标
+ * @returns
+ */
headerItem: function(id, index) {
var that = component.getThis(id);
return that ? that.findHeaderItem(index) : this;
},
- // 获取标签指定头部项
+ /**
+ * 获取标签指定内容项
+ * @param {string} id - 标签 ID
+ * @param {number} index - 标签下标
+ * @returns
+ */
bodyItem: function(id, index) {
var that = component.getThis(id);
return that ? that.findBodyItem(index) : this;
},
- // 调整视图结构
+ /**
+ * 调整视图结构
+ * @param {string} id - 标签 ID
+ * @returns
+ */
setView: function(id) {
var that = component.getThis(id);
if (!that) return this;