# Tabs 标签页
# Tabs 标签页
# 采用对象方式渲染
基础样式
▼显示代码
# 采用dom+comp方式渲染
# 基础样式
尺寸S
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
- 选项卡6
- 选项卡7
- 选项卡8
- 选项卡9
- 选项卡10
- 名字很长的选项卡11
- 选项卡12
- 选项卡13
- 选项卡14
- 选项卡15
- 选项卡16
- 选项卡17
- 选项卡18
- 选项卡19
- 选项卡20
- 选项卡21
- 选项卡22
- 选项卡23
- 选项卡24
- 选项卡25
- 选项卡26
- 选项卡27
- 选项卡28
- 选项卡29
- 选项卡30
我是内容区
▼显示代码
尺寸M
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
尺寸L
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
尺寸XL
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
# 选项卡样式-带边框的
尺寸S
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
尺寸M
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
尺寸L
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
尺寸XL
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
# 选项卡样式-带背景的
尺寸S
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
尺寸M
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
尺寸L
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
尺寸XL
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
# 选项卡样式-带边框和背景的
尺寸S
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
尺寸M
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
尺寸L
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
尺寸XL
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
# 扩展：
纯图标
我是内容区
▼显示代码
我是内容区
▼显示代码
我是内容区
▼显示代码
我是内容区
▼显示代码
图标+文字
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
- 选项卡1
- 选项卡2
- 选项卡3
- 选项卡4
- 选项卡5
我是内容区
▼显示代码
图标+文字+数字
- 选项卡1999
- 选项卡2123
- 选项卡30
- 选项卡4888
- 选项卡5666
我是内容区
▼显示代码
- 选项卡1999
- 选项卡2123
- 选项卡30
- 选项卡4888
- 选项卡5666
我是内容区
▼显示代码
- 选项卡1999
- 选项卡2123
- 选项卡30
- 选项卡4888
- 选项卡5666
我是内容区
▼显示代码
- 选项卡1999
- 选项卡2123
- 选项卡30
- 选项卡4888
- 选项卡5666
我是内容区
▼显示代码
- 选项卡1999
- 选项卡2123
- 选项卡30
- 选项卡4888
- 选项卡5666
我是内容区
▼显示代码
# 参数列表（以comp方式渲染时）
| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
|---|---|---|---|---|
| size | tabs标签页的尺寸（选填项） | string | 否 | "M" |
| styleType | tabs标签页的样式： 1、Tabs 标签页 2、带边框的选项卡样式 3、带背景的选项卡样式 4、带边框和背景的选项卡样式 （选填项） | string | 否 | 1 |
| adaptationWidth | 是否以tabs父元素宽度为基准，将宽度均分给每个页签 | Boolean | 否 | false |
# 参数列表（以对象方式渲染时）
| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
|---|---|---|---|---|
| size | tabs标签页的尺寸（选填项） | string | 否 | "M" |
| styleType | tabs标签页的样式： 1、Tabs 标签页 2、带边框的选项卡样式 3、带背景的选项卡样式 4、带边框和背景的选项卡样式 （选填项） | string | 否 | 1 |
| adaptationWidth | 是否以tabs父元素宽度为基准，将宽度均分给每个页签 | Boolean | 否 | false |
| items | -- | array,由多个object组成 | 是 | - |
items下的object格式：
| key | value | 类型 | 是否必填 | 默认值 |
|---|---|---|---|---|
| label | 标签的文字 | String | 否 | - |
| icon | 标签的图标class | String | 否 | - |
| current | 是否为高亮选中状态 | Boolean | 否 | false |
| disabled | 是否为disabled状态 | Boolean | 否 | false |
| number | 标签的角标数字 | String | 否 | - |
| clickFun | 标签的事件 | function | 否 | - |
# 方法列表(仅支持以对象方式渲染时)
| 方法 | 说明 | 参数 | demo |
| setCurrent | 选中某个页签 | 序号，从0开始 | |
| add | 添加一个页签 | index: 从0开始，在第index个页签后面插入，如果未传，默认插至末尾 item：页签的内容，属性参照上面(items下的object格式) | xxx.add({ index:1, item:{ label:"我是新来的", icon:"xxIcon" } }) |
| remove | 删除一个页签 | 序号，从0开始，如果未传，删除末尾的页签 | xxx.remove(0) |
| enabled | enabled一个页签 | 序号，从0开始 | xxx.enabled(0) |
| disabled | disabled一个页签 | 序号，从0开始 | xxx.disabled(0) |
| destory | 销毁元素 | - | - |
# 补充
对于comp方式渲染时需要重新渲染，请使用如下方式：
new CtpUiTabs(document.querySelector("#xxx"));
document.querySelector("#xxx")既是您想重新渲染的元素。