标签选项卡

标签选项卡是一种交互组件，适用于tab切换、选项联动其他组件数据变化等许多常见的交互场景。

效果案例

配置

组件属性

当前值类型：可通过常量设置默认选中的当前选中项是哪个id对应的选项，通过表达式设置可动态切换当前选中项。

指示器

指示器为标签选项卡选中项的选中指示内容。
模式：指示器的展示模式有自动、填充、固定、自定义。
自动：

填充：

固定：

自定义：
可手动配置指示器的高度和宽度。

分割线

分割线用于将标签选项卡与其它款做分割的线段，位于标签选项卡的底部。
大小：分割线的宽度。
颜色：分割线的颜色。


点击停留时间：当选项卡轮播选中过程中，人为切换选中时，此时为用户能更好的观察当前选项对应的数据情况，可设置停留时间，停留一段时间后再继续轮播。

上标

上标用于在选项基础上进行数字标识的展示。
0值隐藏开启后若上标值为0的时候不展示上标。
圆角：上标圆角的大小。
文本样式：上标内容的字号、颜色、粗细、字间距。
内边距：上标内容与上标框上下左右的间距。
背景：上标背景底色。
偏移：上标位置右上的偏移控制。


主题色：内容选中效果色以及指示器的颜色。

基础样式

用于配置选项卡内容的样式。
文本样式：选项卡内容的字号、颜色、粗细、字间距。
边距：选项卡内容与格子上下左右的间距。

数据

组件数据格式

数据格式说明

静态数据-JSON数据案例

[
    {
        "id": 1,
        "title": "水果",
        "badge": ""
    }
]

交互

支持配置切换选项卡事件
当切换选中选项卡（选中项发生改变）时，触发交互事件：设置大屏变量、打开超链接、设置可见、移动、设置JS事件、设置面板状态。

举例

用选项卡实现tab效果。如：选项卡选中选项一时下方显示表格数据，选中选项二时下方切换显示为径向极柱图。

• 动态面板中添加两个状态1和2，分别放置表格和径向极柱图两个组件；
• 在“切换选项卡”时机中添加两个事件：

事件1：当前组件id=1时，切换面板状态为状态1

事件2：当前组件id=2时，切换面板状态为状态2

效果如下：