layui/docs/tabs/detail/options.md

2.4 KiB

属性名 描述 类型 默认值
elem

组件渲染指定的目标元素选择器或 DOM 对象

string/DOM -
id

组件渲染的唯一实例 ID

string -
className

给主容器追加 CSS 类名,以便自定义样式

string -
trigger

标签切换的触发事件

boolean

click

headerMode

标签头部的显示模式。可选值有:

  • auto 自动模式,根据标签头部是否溢出自动显示不同模式
  • scroll 始终滚动模式
  • normal 始终常规模式,不渲染头部滚动结构
string

auto

index

初始选中的标签索引或标签 lay-id 属性值

number -
closable

是否开启标签项关闭功能

boolean

false

header

设置标签头部列表,通常在「非自动渲染」的场景下使用:

1. 方法渲染

header 传入一个数组,且成员值为对象,即为方法渲染时传入的头部列表数据。如:

header: [
  { title: 'Tab1' }, // 除 `title` 为必传项外,也可传入其他任意字段。
  { title: 'Tab2' }
]

2. 任意元素渲染

header 传入一个数组,则成员值为元素选择器,即为绑定标签头部列表元素。如:

header: ['#tabsHeader', '>li'],
body

设置标签内容列表,通常在「非自动渲染」的场景下使用:

1. 方法渲染

body 传入一个数组,且成员值为对象,即为方法渲染时传入的标签内容列表数据。如:

body: [
  { content: 'Tab1' }, // `content` 为必传项
  { content: 'Tab2' }
]

2. 任意元素渲染

body 传入一个数组,则成员值为元素选择器,即为绑定标签内容列表元素。如:

body: ['#tabsBody', '>div'],