---
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 容器 `