--- title: 选项卡组件 tab toc: true --- # 选项卡组件 > 选项卡组件 `tab` 是指可进行标签页切换的一段容器,常广泛应用于 Web 页面。由于为了向下兼容等诸多历史原因,在 2.x 版本中,`tab` 组件属于 `element` 模块的子集。

示例

{{- d.include("/tab/detail/demo.md") }}

风格

tab 组件提供了三种 UI 风格,分别为: | 风格 | className | | --- | --- | | [默认风格](#default) | `class="layui-tab"` | | [简约风格](#brief) | `class="layui-tab layui-tab-brief"` | | [卡片风格](#card) | `class="layui-tab layui-tab-card"` |

默认风格

  

简约风格

  

卡片风格

  

API

| API | 描述 | | --- | --- | | var element = layui.element | 获得 `element` 模块。 | | [element.render(\'tab\', filter)](#element.render) | 渲染 tab 组件 | | [element.tabAdd(filter, options)](#element.tabAdd) | 添加 tab 选项 | | [element.tabDelete(filter, layid)](#element.tabDelete) | 删除 tab 选项 | | [element.tabChange(filter, layid)](#element.tabChange) | 切换 tab 选项 | | [element.tab(options)](#element.tab) | 绑定自定义 tab 元素 |

元素属性

| 属性 | 描述 | | --- | --- | | lay-allowclose | 是否开启删除图标。设置在 tab 容器 `