layui/package/document-component/src/document/zh-CN/components/tab.md

::: anchor :::

::: title 基本介绍 :::

::: describe 提供平级的区域将大块内容进行收纳和展现，保持界面整洁。 :::

::: title 基础使用 :::

::: demo 使用 lay-tab 与 lay-tab-item 标签, 创建选项卡。

选项一

选项二

:::

::: title 图标 :::

::: demo 通过 icon 属性, 快速设置前置图标, 也可通过 title 插槽实现。

选项一

选项二

选项三

选项四

选项四

选项五

:::

::: title 简约模式 :::

::: demo

选项一

选项二

:::

::: title 卡片模式 :::

::: demo

选项一

选项二

:::

::: title 允许关闭 :::

::: demo

选项一

选项二

选项三

:::

::: title 关闭前置 :::

::: demo

选项一

选项二

选项三

选项四

选项五

id为单数的可以关闭

:::

::: title 嵌套循环 :::

::: demo

内容{{a.id}}

:::

::: title 动态添加 :::

::: demo

添加 内容{{a.id}}

:::

::: title 位置设置 :::

::: demo

left right top bottom 默认 简约 卡片

选项一

选项二

选项三

选项四

:::

::: title Tab 属性 :::

::: table

属性	描述	类型	默认值	可选值
v-model	当前激活	string	-	-
type	主题样式	string	-	brief card
tabPosition	位置	string	bottom	top bottom left right
allow-close	允许关闭	boolean	false	true false
before-close	关闭之前的回调钩子函数,参数(id), return false 表示不进行关闭	Function	-	-
before-leave	切换标签之前的回调钩子函数, 参数(id), return false 表示不进行关闭	Function	-	-
activeBarTransition	是否开启 activeBar 动画,仅 brief 有效,默认 false	boolean	false	true false

:::

::: title Tab 事件 :::

::: table

事件	描述	参数
change	选中切换	id
close	关闭事件	id

:::

::: title Tab Item 属性 :::

::: table

属性	描述	类型	默认值	可选值
id	唯一标识	string	-	-
title	头部标题	string VNode	-	-
icon	前置图标	string VNode
closable	允许关闭	boolean	false	true false

:::

::: title Tab Item 插槽 :::

::: table

属性	描述	参数
title	标题	--

:::

::: contributor tab :::

::: previousNext tab :::