diff --git a/docs/.layui/detail/demo.md b/docs/.layui/detail/demo.md
new file mode 100644
index 00000000..5c3a8d97
--- /dev/null
+++ b/docs/.layui/detail/demo.md
@@ -0,0 +1,21 @@
+
+
+
+
+示例1
+
+
+
+
+
+示例2
+
+
+
+
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/.layui/index.md b/docs/.layui/index.md
index 10045b78..ff751287 100644
--- a/docs/.layui/index.md
+++ b/docs/.layui/index.md
@@ -2,10 +2,10 @@
title: 某某组件 MOD_NAME
toc: true
---
-
+
# 某某组件
-> 某某组件 `MOD_NAME`
+> 某某组件 `MOD_NAME`
示例
@@ -27,8 +27,8 @@ toc: true
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
-属性
+属性
{{- d.include("/MOD_NAME/detail/options.md") }}
-
\ No newline at end of file
+
diff --git a/docs/.layui/prompt.txt b/docs/.layui/prompt.txt
new file mode 100644
index 00000000..7ff69634
--- /dev/null
+++ b/docs/.layui/prompt.txt
@@ -0,0 +1,34 @@
+> 自动生成组件文档提示词
+
+# 角色
+你是一位顶级的前端开发专家，能够高效、准确地为 JavaScript 组件代码生成对应的接口文档，并且严格遵循给定的模板规则。
+
+## 组件
+本次生成的组件名称为: input (统一简称为 MOD_NAME)
+
+## 任务
+按照 `/.layui` 目录给定的模板，为 `/src/modules/MOD_NAME.js` 生成完整的文档，并保存在 `/docs/MOD_NAME/` 目录。文档要采用 `HTML+Markdown+laytpl` 混合编写，其中 laytpl 为视图引擎（类似于 ejs，可为文档引入子模版，如：`{{- d.include("/MOD_NAME/detail/demo.md") }}`）。
+
+### 文档模板介绍
+- `index.md`: 组件文档主文件，包含示例、API、属性等完整内容。
+- `detail/`: 目录存放文档子模板。一般在 index.md 内容过大时，可将内容碎片放置在该目录中，index.md 只需引用即可。
+ - `detail/demo.md`: 组件示例主模板，在 `index.md` 中引入。
+ - `detail/options.md`: 组件 `render()` 方法接受的参数配置项。
+- `examples/`: 目录存放组件示例文件，在 `detail/demo.md` 中引入。
+
+### 文档内容要求
+- `index.md` 主文档内容主要包含以下层级：
+```markdown
+## 示例
+## API
+### 渲染
+### 属性
+## 事件（如果有的话）
+```
+其中，API 中列举的所有方法进行介绍，如果方法传入的参数（如 opts）是一个选项，需按照表格的方式展示，如：
+```markdown
+| opts | 描述 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| 内容 | 内容 | 内容 | 内容 |
+```
+- `detail/options.md` 需按照当前已有的 HTML + Markdown 模板混合编写。
diff --git a/docs/component/detail/options.md b/docs/component/detail/options.md
new file mode 100644
index 00000000..6045945f
--- /dev/null
+++ b/docs/component/detail/options.md
@@ -0,0 +1,197 @@
+
+
+
+
+
+
+
+
+
+ | 属性名 |
+ 描述 |
+ 类型 |
+ 默认值 |
+
+
+
+
+| name |
+
+
+组件名称。如 `name:'tabs'`，在使用组件时，即可通过 `layui.tabs` 获得该组件。注：*组件名必须唯一*。
+
+ |
+string |
+- |
+
+
+| config |
+
+
+定义组件渲染时的默认配置项。
+
+ |
+object |
+- |
+
+
+| CONST |
+
+
+通用常量集，一般存放固定字符，如类名等。如：
+
+```
+CONST: {
+ ELEM: 'layui-tabs',
+}
+```
+
+上述常量可通过 `component.CONST.ELEM` 获得。
+
+ |
+object |
+- |
+
+
+| isRenderWithoutElem |
+
+
+渲染是否无需指定目标元素。即无需设置 `elem` 选项，一般用于渲染即显示的组件类型。
+
+ |
+boolean |
+
+
+`false`
+
+ |
+
+
+| isRenderOnEvent |
+
+
+渲染是否由事件触发。如 `dropdown` 这类通过点击触发的组件，那么应该设置为 `true`；而诸如 `tabs` 这类初始即展示的组件，则应该设置为 `false`。*推荐根据组件类型始终显式设置对应值*。
+
+ |
+boolean |
+
+
+`true`
+
+ |
+
+
+| isDeepReload |
+
+
+组件重载时是否允许深度重载，即对重载时选项进行深度合并。
+
+ |
+boolean |
+
+
+`false`
+
+ |
+
+
+|
+
+
+
+[回调函数](#options.callback)
+
+
+
+ |
+
+
+| render |
+
+
+组件渲染的逻辑。
+
+```js
+render: function() {
+ // 组件的容器构建、插入等
+ // …
+}
+```
+
+也可以通过原型 `component.Class.prototype.render` 进行定义。
+
+ |
+
+
+| beforeInit |
+
+
+组件初始化之前的回调函数。
+
+```js
+beforeInit: function(options) {
+ console.log(options); // 获得组件初始化前的配置项
+}
+```
+
+ |
+
+
+| beforeRender |
+
+
+渲染之前的回调函数。
+
+```js
+beforeRender: function(options) {
+ console.log(options); // 获得组件渲染前的配置项
+}
+```
+
+ |
+
+
+| extendsInstance |
+
+
+扩展组件渲染的实例对象的回调函数。如：
+
+```js
+extendsInstance: function(that) {
+ return {
+ // 关闭组件
+ close: function() {
+ that.remove(); // 调用组件原型中的 remove 方法
+ }
+ }
+}
+```
+
+当组件渲染时，即可通过它返回的对象调用实例方法：
+
+```js
+var inst = xxx.render(); // 某组件渲染
+inst.close(); // 关闭某组件
+```
+
+ |
+
+
+| events |
+
+
+定义组件各内部事件。
+
+```js
+events: function() {
+ // 亦可包含针对组件的 window, document 等全局事件
+ // …
+}
+```
+
+也可以通过原型 `component.Class.prototype.events` 进行定义。
+
+ |
+
+
+
diff --git a/docs/component/index.md b/docs/component/index.md
new file mode 100644
index 00000000..11fdb927
--- /dev/null
+++ b/docs/component/index.md
@@ -0,0 +1,289 @@
+---
+title: 组件构建器 component
+toc: true
+---
+
+# 组件构建器 2.10+
+
+> 组件构建器 `component` 是 2.10 版本新增的重要模块，旨在为 Layui 2 系列版本逐步构建统一 API 规范的组件。
+
+API
+
+| API | 描述 |
+| --- | --- |
+| [layui.component(options)](#create) | 创建组件 |
+
+创建组件
+
+`layui.component(options);`
+
+- 参数 `options` : 基础属性配置项。[#详见属性](#options)
+
+该方法返回一个对象，包含用于组件对外的基础接口，如：组件渲染、重载、事件操作，及构造函数等等。用法示例：
+
+```js
+/**
+ * tabs
+ * 标签页组件
+ */
+layui.define('component', function(exports) {
+ // 创建组件
+ var component = layui.component({
+ name: 'tabs', // 组件名称
+ config: { // 组件默认配置项
+ // …
+ },
+ render: function() { // 组件渲染逻辑
+ // …
+ },
+ // 其他选项
+ });
+
+ // 将创建组件时返回的 `component` 对象作为组件的接口输出
+ // 组件将继承通用的基础接口，如 render, reload, set 等方法
+ exports(component.CONST.MOD_NAME, component);
+});
+```
+
+属性配置
+
+
+{{- d.include("/component/detail/options.md") }}
+
+
+基础接口 🔥
+
+通过 `component` 模块创建的组件，均会继承内部定义的「基础对外接口」和「组件渲染的通用选项」。
+
+| 接口 | 描述 |
+| --- | --- |
+| [component.render(options)](#render) | 组件渲染 |
+| [component.reload(id, options)](#reload) | 组件重载 |
+| [component.set(options)](#set) | 设置组件渲染时的全局配置项 |
+| [component.on(\'event(filter)\', callback)](#on) | 组件的自定义事件 |
+| [component.getThis(id)](#getThis) | 获取指定组件的实例对象 |
+| component.index | 获得组件的自增索引 |
+| component.config | 获得组件渲染时的全局配置项。一般通过 `set` 方法设置 |
+| component.cache | 获得组件的缓存数据集。如组件实例 ID 集 |
+| [component.CONST](#CONST) | 获得组件的通用常量集。如 `MOD_NAME` 等 |
+| [component.Class](#Class) | 获得组件的构造函数。一般用于扩展原型方法 |
+
+> 😊 注：上表中的 `component` 为组件的基础对象，实际使用时，请根据实组件名称进行替换。如 `tabs` 组件，对应的接口则为：`tabs.render(options)` `tabs.on('event(filter)', callback)` 等。
+
+组件渲染
+
+`component.render(options)`
+
+- 参数 `options` : 组件渲染的配置项。可继承的通用选项见下表：
+
+| 选项 | 描述 |
+| --- | --- |
+| elem | 件渲染指定的目标元素选择器或 DOM 对象 |
+| id | 组件渲染的唯一实例 ID |
+| show | 是否初始即渲染组件。通常结合创建组件设定的 `isRenderOnEvent` 选项决定是否启用 |
+
+更多渲染时的选项则由各组件内部单独定义，具体可查阅各组件对应的文档。
+
+```js
+// 以 tabs 组件为例
+// 渲染
+tabs.render({
+ elem: '#id',
+ // …
+});
+```
+
+组件重载
+
+`component.reload(id, options)`
+
+- 参数 `id` : 组件实例 ID。
+- 参数 `options` : 组件重载的配置项。
+
+该方法可实现对组件的完整重载。部分组件通常还提供了「仅数据重载」，具体可参考各组件对应的文档。
+
+```js
+// 以 tabs 组件为例
+// 重载 tabs 组件实例
+tabs.reload('id', {
+ // …
+})
+```
+
+全局设置
+
+`component.set(options)`
+
+- 参数 `options` : 组件渲染的配置项。
+
+该方法用于全局设置组件渲染时的默认配置项，需在组件渲染之前执行。
+
+```js
+// 以 tabs 组件为例
+// 全局设置。后续所有渲染均会生效，除非对选项进行覆盖
+tabs.set({
+ trigger: 'mouseenter' // 默认的触发事件
+ // …
+});
+
+// 渲染实例 1
+tabs.render({ id: 'id1'}); // 继承全局设置
+
+// 渲染实例 2
+tabs.render({
+ id: 'id2',
+ trigger: 'click' // 覆盖全局的触发事件
+});
+```
+
+事件定义
+
+`component.on('event(id)', callback)`
+
+- 参数 `event(id)` : 是事件的特定结构。 `event` 为事件名，支持的事件见各组件列表。`id` 为组件的实例 ID。
+- 参数 `callback` : 事件回调函数。返回的参数由各组件内部单独定义。
+
+具体事件一般由组件内部单独定义，具体可查看各组件对应的文档。
+
+```js
+// 以 tabs 组件为例：
+// 组件渲染成功后的事件
+tabs.on('afterRender(id)', function(data) {
+ console.log(obj);
+});
+```
+
+获取实例
+
+`component.getThis(id)`
+
+- 参数 `id` : 组件的实例 ID。
+
+该方法可获取组件渲染时对应的实例，以调用组件内部的原型方法，一般用于在外部对组件进行扩展或重构。
+
+```js
+// 以 tabs 组件为例
+var tabInstance = tabs.getThis('id');
+// 调用内部的标签滚动方法
+tabInstance.roll();
+```
+
+基础常量
+
+`component.CONST`
+
+获取组件的通用常量集，一般存放固定字符，如类名等。
+
+```js
+// 基础常量如下
+component.CONST.MOD_NAME; // 组件名称
+component.CONST.MOD_INDEX; // 组件自增索引
+component.CONST.CLASS_THIS; // layui-this
+component.CONST.CLASS_SHOW; // layui-show
+component.CONST.CLASS_HIDE; // layui-hide
+component.CONST.CLASS_HIDEV; // layui-hide-v
+component.CONST.CLASS_DISABLED; // layui-disabled
+component.CONST.CLASS_NONE; // layui-none
+
+// 更多常量一般在各组件内部单独定义，以 tabs 组件为例
+tabs.CONST.ELEM; // layui-tabs
+```
+
+扩展接口
+
+除上述「基础接口」外，你也可以对接口进行任意扩展，如：
+
+```js
+/**
+ * 定义组件
+ */
+layui.define('component', function(exports) {
+ // 创建组件
+ var component = layui.component({
+ name: 'test',
+ // …
+ });
+ // 扩展组件接口
+ layui.$.extend(component, {
+ // 以扩展一个关闭组件面板的接口为例
+ close: function(id) {
+ var that = component.getThis(id);
+ if(!that) return this;
+ that.remove(obj); // 调用原型中的 remove 方法
+ }
+ });
+ // 输出组件接口
+ exports(component.CONST.MOD_NAME, component);
+});
+```
+
+```js
+/**
+ * 使用组件（以上述定义的 test 组件为例）
+ */
+layui.use('test', function() {
+ var test = layui.test;
+ // 渲染组件
+ test.render({
+ elem: '#id',
+ id: 'test-1'
+ });
+ // 关闭组件面板（通常在某个事件中使用）
+ test.close('test-1');
+});
+```
+
+扩展原型
+
+`component.Class`
+
+当通过 `layui.component()` 方法创建一个新的组件时，通常需借助 `Class` 构造函数扩展组件原型，以灵活实现组件的个性化定制。但一般不推荐重写 `component.js` 原型中已经定义的基础方法，如：`init, reload, cache`
+
+```
+/**
+ * 定义组件
+ */
+layui.define('component', function(exports) {
+ // 创建组件
+ var component = layui.component({
+ name: '', // 组件名称
+ // …
+ });
+
+ // 获取构造器
+ var Class = component.Class;
+
+ // 扩展原型
+ Class.prototype.xxx = function() {
+ // …
+ };
+ Class.prototype.aaa = function() {
+ // …
+ };
+
+ // 输出组件接口
+ exports(component.CONST.MOD_NAME, component);
+});
+```
+
+通过 `Class` 构造函数也可以对某个组件的原型进行重构，但一般不推荐，因为这可能破坏组件的基础功能。
+
+```
+// 以 tabs 组件为例
+var tabs = layui.tabs;
+
+// 获得 tabs 组件构造函数
+var Class = tabs.Class;
+
+// 重构 tabs 组件内部的 xxx 方法（不推荐）
+Class.prototype.xxx = function() {
+ // …
+};
+```
+
+您也可以直接参考 tabs 组件源码中关于扩展原型的具体实践。
+
+## 💖 心语
+
+Layui 由于早前欠缺统筹性思维，很多组件自成一体，使得无法对组件进行很好的统一管理。随着版本的迭代，我们也一直在努力尝试改善这一问题，但很多时候，为了向下兼容而不得不保留许多旧有的特性。`component` 模块的初衷正是为了确保组件的一致性，如核心逻辑和 API 设计等，其目的也是为了让 2.x 系列版本尽可能地减少些遗憾，让 Layui 在既定的范式中保持前行。
+
diff --git a/docs/index.md b/docs/index.md
index 2b44ada8..2b0c421b 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -18,7 +18,7 @@ toc: true
用途：用于更简单快速地构建网页界面 |
- | 环境：全部主流 Web 浏览器（IE8 以下除外） |
+ 环境：详见不同版本的浏览器兼容规划 N |
特性：原生态开发 / 轻量级模块化 / 外简内丰 / 开箱即用 |
diff --git a/docs/tab/index.md b/docs/tab/index.md
index 3f5d6a4d..d67c8ab0 100644
--- a/docs/tab/index.md
+++ b/docs/tab/index.md
@@ -2,8 +2,10 @@
title: 选项卡组件 tab
toc: true
---
-
-# 选项卡组件
+
+# ~~选项卡组件~~
+
+> 📣 升级提示：我们在 2.10 版本中新增了全新的 tabs 标签页组件，用于替代原 `element` 模块中的 `tab` 组件，建议过渡到全新的 tabs 组件，旧的 ~~tab~~ 组件将在后续合适的版本中移除。 [前往全新 tabs 组件](../tabs/)
> 选项卡组件 `tab` 是指可进行标签页切换的一段容器，常广泛应用于 Web 页面。由于为了向下兼容等诸多历史原因，在 2.x 版本中，`tab` 组件属于 `element` 模块的子集。
@@ -159,7 +161,7 @@ tab 组件会在元素加载完毕后，自动对 tab 元素完成一次渲染
```
-
+
diff --git a/docs/tabs/examples/beforeClose.md b/docs/tabs/examples/beforeClose.md
new file mode 100644
index 00000000..eecc5749
--- /dev/null
+++ b/docs/tabs/examples/beforeClose.md
@@ -0,0 +1,44 @@
+
+
+
+
Tab Content-1
+
Tab Content-2
+
Tab Content-3
+
Tab Content-4
+
Tab Content-5
+
Tab Content-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
+
+
+
+
+
+
+
+
+
+
+
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/examples/trigger.md b/docs/tabs/examples/trigger.md
new file mode 100644
index 00000000..9523fa9d
--- /dev/null
+++ b/docs/tabs/examples/trigger.md
@@ -0,0 +1,43 @@
+#### mouseenter 触发
+
+
+
+
+
内容-1
+
内容-2
+
内容-3
+
内容-4
+
内容-5
+
内容-6
+
+
+
+
+
内容-1
+
内容-2
+
内容-3
+
内容-4
+
内容-5
+
内容-6
+
+
示例
+
+
+
+
+{{- d.include("/tabs/detail/demo.md") }}
+
+
+API
+
+| API | 描述 |
+| --- | --- |
+| var tabs = layui.tabs | 获得 `tabs` 模块。|
+| [基础接口](../component/#export) | 该组件由 `component` 构建，因此继承其提供的基础接口。|
+| [tabs.render(options)](#render) | tabs 组件渲染，核心方法。|
+| [tabs.add(id, opts)](#add) | 新增一个标签项。|
+| [tabs.close(id, index, force)](#close) | 关闭指定的标签项。|
+| [tabs.closeMult(id, mode, index)](#closeMult) | 批量关闭标签项。|
+| [tabs.change(id, index, force)](#change) | 切换到指定的标签项。|
+| [tabs.data(id)](#data) | 获取当前标签页相关数据。|
+| [tabs.getHeaderItem(id, index)](#getHeaderItem) | 获取指定的标签头部项。|
+| [tabs.getBodyItem(id, index)](#getBodyItem) | 获取指定的标签内容项。|
+| [tabs.refresh(id)](#refresh) | 刷新标签视图。 |
+
+渲染
+
+`tabs.render(options)`
+
+- 参数 `options` : 基础属性配置项。[#详见属性](#options)
+
+组件支持以下三种渲染方式：
+
+#### 1. 自动渲染
+
+tabs 组件会在元素加载完毕后，自动对 `class="layui-tabs"` 目标元素完成一次渲染，若无法找到默认的目标元素（如：动态插入的标签元素的场景），则可通过该方法完成对标签页的初始化渲染。
+
+```js
+// 对 class="layui-tabs" 所在标签进行初始化渲染
+tabs.render();
+```
+
+#### 2. 方法渲染
+
+通过方法动态渲染一个 tabs 组件，无需在 HTML 中书写标签页的 HTML 结构。
+
+```js
+
+
+
+```
+
+#### 3. 为任意元素渲染 tabs 功能
+
+当 `header` 和 `body` 参数传入元素选择器时，可为任意元素绑定标签切换功能。
+
+```js
+// 给任意元素绑定 Tab 功能
+tabs.render({
+ elem: '#demoTabs3', // 目标主容器选择器
+ header: ['#demoTabsHeader', '>button'], // 标签头部主元素选择器、标签头部列表选择器
+ body: ['#demoTabsBody', '>.test-item'] // 标签内容主元素选择器、标签内容列表选择器
+});
+```
+
+具体用法可直接参考上述示例：[给任意元素绑定 tabs 切换功能](#demo-custom)
+
+
+属性
+
+
+{{- d.include("/tabs/detail/options.md") }}
+
+
+新增标签
+
+`tabs.add(id, opts)`
+
+- 参数 `id` : 组件的实例 ID
+- 参数 `opts` : 标签配置项。可选项详见下表
+
+| opts | 描述 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 标签标题。必填项 | string | - |
+| content | 标签内容。必填项 | string | - |
+| id | 标签的 `lay-id` 属性值 | string | - |
+| index | 活动标签的索引或 `lay-id` 属性值，默认取当前选中标签的索引 | number | - |
+| mode | 标签的插入方式。支持以下可选值：- `append` 插入标签到最后
- `prepend` 插入标签到最前
- `before` 在活动标签前插入
- `after` 在活动标签后插入
| string | `append` |
+| closable | 标签是否可关闭。初始值取决于 `options.closable` | boolean | `false` |
+| headerItem | 自定义标签头部元素，如 `headerItem: ''` | string | - |
+| bodyItem | 自定义标签内容元素，如 `bodyItem: ''` | string | - |
+| done | 标签添加成功后执行的回调函数 | Function | - |
+
+该方法用于给对应的 tabs 实例新增一个标签
+
+```js
+tabs.add('test', {
+ title: 'New Tab 1',
+ content: 'New Tab Content 1',
+});
+```
+
+关闭标签
+
+`tabs.close(id, index, force)`
+
+- 参数 `id` : 组件的实例 ID
+- 参数 `index` : 标签索引或标签的 `lay-id` 属性值
+- 参数 `force` : 是否强制关闭。若设置 `true` 将忽略 `beforeClose` 事件行为。默认 `false`
+
+该方法用于关闭指定的标签项。
+
+```js
+tabs.close('test', 3); // 关闭索引为 3 的标签
+tabs.close('test', 3, true); // 强制关闭索引为 3 的标签
+tabs.close('test', 'abc'); // 关闭 lay-id="abc" 的标签
+```
+
+批量关闭标签
+
+`tabs.closeMult(id, mode, index)`
+
+- 参数 `id` : 组件的实例 ID
+- 参数 `mode` : 关闭方式。支持以下可选值：
+
+| mode | 描述 |
+| --- | --- |
+| other | 关闭除当前标签外的所有标签 |
+| right | 关闭当前标签及右侧标签 |
+| all | 关闭所有标签 |
+
+- 参数 `index` : 活动标签的索引或 `lay-id` 属性值，默认取当前选中标签的索引。一般用于标签右键事件。
+
+该方法用于批量关闭标签。
+
+```js
+tabs.closeMult(id, 'other'); // 关闭除当前标签外的所有标签
+tabs.closeMult(id, 'other', 3); // 关闭除索引为 3 的标签外的所有标签
+tabs.closeMult(id, 'right'); // 关闭当前标签及右侧标签
+tabs.closeMult(id, 'right', 3); // 关闭索引为 3 的标签的右侧所有标签
+tabs.closeMult(id, 'all'); // 关闭所有标签
+```
+
+切换标签
+
+`tabs.change(id, index, force)`
+
+- 参数 `id` : 组件的实例 ID
+- 参数 `index` : 标签索引或标签的 `lay-id` 属性值
+- 参数 `force` : 是否强制切换。若设置 `true` 将忽略 `beforeChange` 事件行为。默认 false
+
+该方法用于切换到指定的标签项。
+
+```js
+tabs.change('test', 3); // 切换到索引为 3 的标签
+tabs.change('test', 3, true); // 强制切换到索引为 3 的标签
+tabs.change('test', 'abc'); // 切换到 lay-id="abc" 的标签
+tabs.change('test', 'abc', true); // 强制切换到 lay-id="abc" 的标签
+```
+
+获取标签相关数据
+
+`tabs.data(id)`
+
+- 参数 `id` : 组件的实例 ID
+
+该方法用于获取标签相关数据。
+
+```js
+var data = tabs.data('test');
+console.log(data);
+```
+
+返回的 `data` 包含以下字段：
+
+```js
+{
+ options, // 标签配置信息
+ container, // 标签容器的相关元素
+ thisHeaderItem, // 当前标签头部项
+ thisBodyItem, // 当前标签内容项
+ index, // 当前标签索引
+ length, // 当前标签数
+}
+```
+
+
+
+`tabs.getHeaderItem(id, index)`
+
+- 参数 `id` : 组件的实例 ID
+- 参数 `index` : 标签索引或标签的 `lay-id` 属性值
+
+该方法用于获取标签头部项元素。
+
+```js
+var headerItem = tabs.getHeaderItem('test', 3); // 获取索引为 3 的标签头部项元素
+```
+
+获取标签内容项
+
+`tabs.getBodyItem(id, index)`
+
+- 参数 `id` : 组件的实例 ID
+- 参数 `index` : 标签索引或标签的 `lay-id` 属性值
+
+该方法用于获取标签内容项元素。
+
+```js
+var bodyItem = tabs.getBodyItem('test', 3); // 获取索引为 3 的标签内容项元素
+```
+
+刷新标签视图
+
+`tabs.refresh(id)`
+
+- 参数 `id` : 组件的实例 ID
+
+该方法用于刷新标签视图，如标签头部的滚动结构等，一般通过非 API 方式对标签进行修改的场景中使用。
+
+```js
+tabs.refresh('test'); // 刷新标签视图
+```
+
+
+事件
+
+`tabs.on('event(id)', callback)`
+
+- 参数介绍详见 `component` 组件的[事件定义](../component/#on)。以下是组件提供的 `event` 事件列表
+
+| event | 描述 |
+| --- | --- |
+| [afterRender](#on-afterRender) | 标签渲染后的事件 |
+| [beforeChange](#on-beforeChange) | 标签切换前的事件 |
+| [afterChange](#on-afterChange) | 标签切换后的事件 |
+| [beforeClose](#on-beforeClose) | 标签关闭前的事件 |
+| [afterClose](#on-afterClose) | 标签关闭后的事件 |
+
+
+标签渲染后的事件
+
+`tabs.on('afterRender(id)', callback)`
+
+标签渲染成功后触发。
+
+```js
+tabs.on('afterRender(testID)', function(data){
+ console.log(data); // 标签相关数据
+});
+```
+
+标签切换前的事件
+
+`tabs.on('beforeChange(id)', callback)`
+
+标签在切换前触发，通过在事件中 `return false` 可阻止默认标签切换行为。通常和 `tabs.change()` 方法搭配使用。
+
+```js
+// tabs 切换前的事件
+tabs.on(`beforeChange(testID)`, function(data) {
+ console.log(data); // 标签相关数据
+ console.log(data.from.index); // 切换前的选中标签索引
+ console.log(data.from.headerItem); // 切换前的选中标签头部项
+ console.log(data.to.index); // 切换后的选中标签索引
+ console.log(data.to.headerItem); // 切换后的选中标签头部项
+
+ // 阻止标签默认关闭
+ return false;
+});
+```
+
+示例演示：
+
+
+
+
+
+标签切换后的事件
+
+`tabs.on('afterChange(id)', callback)`
+
+标签成功切换后触发。
+
+```js
+// tabs 切换后的事件
+tabs.on('afterChange(testID)', function(data) {
+ console.log(data);
+});
+```
+
+标签关闭前的事件
+
+`tabs.on('beforeClose(id)', callback)`
+
+标签在切换前触发，通过在事件中 `return false` 可阻止默认标签切换行为。通常和 `tabs.close()` 方法搭配使用。
+
+
+
+
+
+标签关闭后的事件
+
+`tabs.on('afterClose(id)', callback)`
+
+标签被成功关闭后触发。
+
+```js
+// tabs 关闭后的事件
+tabs.on('afterClose(testID)', function(data) {
+ console.log(data);
+});
+```
+
+## 💖 心语
+
+tabs 是通过 component 重构的首个组件，它来自于最早试图发布的 Layui 3.0（后因为 3.0 技术路线的变化，而整理放至 2.10+ 版本中），目的是将 element 模块中的 tab 组件进行解耦，增强其可扩展性。为了给开发者必要的时间缓冲，我们会将旧 tab 组件仍然保留在后续的若干版本中，但会在合适的时机对旧 tab 组件进行剔除，建议开发者尽量提前过渡到当前新的 tabs 组件。
+
diff --git a/examples/tabs.html b/examples/tabs.html
new file mode 100644
index 00000000..5a6eff73
--- /dev/null
+++ b/examples/tabs.html
@@ -0,0 +1,289 @@
+
+
+
+
+
+ 标签页组件 - Layui
+
+
+
+
+
动态操作
+
+
+
+
Tab Content-1
+
Tab Content-2
+
Tab Content-3
+
Tab Content-4
+
Tab Content-5
+
Tab Content-6
+
+
+
+
+
+
+
+
+
+
+
+
方法渲染
+
+
+
卡片风格
+
+
+
+
内容-1
+
内容-2
+
内容-3
+
内容-4
+
内容-5
+
内容-6
+
+
+
+
卡片 + 边框
+
+
+
+
+
+
+
+
+
2
+
3
+
4
+
5
+
6
+
+
+
+
标签 HASH 定位
+
+
+
+
+
标签嵌套
+
+
+
给任意元素绑定 tabs 切换功能
+
+
+
+
+
内容 111
+
内容 222
+
内容 333
+
+
+
+