选项卡 group-tabs

多标签页容器，每个标签对应一个子面板。

• 类型串：group-tabs　默认尺寸：[400, 300]　分类：控件

实时预览

下面渲染的是真实组件（与编辑器 / 运行时同源）。修改右侧「样式参数」，左侧预览实时更新；点击底部「全页面查看」可放大。

属性

下表为本组件特有的属性；position / size / opacity / background / border / 联动选中 / 筛选等通用参数见组件手册总览。

basic

属性	名称	类型	默认	说明
tab-items	标签列表	section-list(item=标签)	标签一,标签二,标签三
orientation	排列方向	select(radioGroup)	horizontal	可选：horizontal / vertical
bar-position	Tab 条位置	select(radioGroup)	start	可选：start / end
default-active	默认激活项	number(min=0)	0
bar-size	Tab 条厚度	number(unit=px,min=0)	40
tab-gap	标签间隙	number(unit=px,min=0)	4
auto-switch	自动切换	boolean	false
switch-interval	切换间隔	number(min=0.5,unit=秒)	3
tab-align	标签对齐	select(radioGroup)	flex-start	可选：flex-start / center / space-between
tab-type	类型	select(radioGroup)	tag	可选：tag / mark
tag-shape	标签形状	select(radioGroup)	right_angle	可选：right_angle / fillet
mark-shape	标示形状	select(radioGroup)	round	可选：round / square
mark-size	标示尺寸	number(unit=px,min=2)	12

font

属性	名称	类型	默认	说明
tab-font-size	字号	number(unit=px,min=0)	14
tab-color	默认文字色	color	#a7adba
tab-active-color	激活文字色	color	#ffffff
tab-hover-show	启用悬浮态	boolean	false
tab-hover-color	悬浮文字色	color	#ffffff

tabStyle

属性	名称	类型	默认	说明
tab-bg	默认背景	color	transparent
tab-active-bg	激活背景	color	rgba(47,123,255,0.18)
tab-hover-bg	悬浮背景	color	rgba(47,123,255,0.10)
tab-radius	圆角	number(unit=px,min=0)	4
show-indicator	显示激活指示条	boolean	true
indicator-color	指示条颜色	color	#2f7bff

数据绑定

字段槽	类型 / 约束	说明
tab-field	field(recommend=string,min=0,max=1)	标签字段

事件

触发器

触发器在预览 / 播放态生效（编辑态点击 = 选中组件）。写在本组件 options.interactions 的 groups[].trigger 里。

触发器	名称	触发时机	payload（供动作公式 {:字段} 取值）
itemClicked	点击某项	点击某个页签时触发	该页签项数据
click	点击	点击本组件时触发	无
mouseEnter	鼠标移入	指针移入组件时触发	无
mouseLeave	鼠标移出	指针移出组件时触发	无
appear	入场	组件出现时触发（配合进场动画）	无
disappear	离场	组件消失时触发（配合退场动画）	无
receiveBehaviorEvent	接收行为事件	收到 sendBehaviorEvent 动作或宿主 ctx.emit 投递的事件时触发（按 eventName 匹配）	发送方携带的 data

动作

触发器命中后执行的动作。本组件既可发起动作（配在自己的交互里），也可作为其它组件动作的目标。

动作	名称	说明
changeOption	修改设置	把本组件（或其它组件）的某个属性改为静态值 / 公式动态值
switchState	切换状态	切到多状态里的某个状态（state:"" 回默认态）
appear / disappear	进 / 退场动画	对目标 opacity 做 0↔100 插值的显隐动画

完整动作清单（switchScreen / switchWindow / openUrl / sendBehaviorEvent / transfer / executeScript / requestApi 等）与持久化写法见事件交互。

示例

{
  "type": "group-tabs",
  "uid": "w_group_tabs",
  "options": {
    "position": [40, 40],
    "size": [400, 300],
    "tab-field": [["conn_demo", "tbl_demo", "字段名"]]
  }
}

绑定三元组 [连接uid, 表uid, 字段uid] 指向工程 connections 里的真实字段，见数据系统。

延伸阅读：组件手册总览 · 数据系统 · 事件交互。