
# 设置UI引擎前端页面标签组组件属性
标签组组件是标签组件的批量扩展形态，支持通过结构化数据快速生成一组标签，适配批量状态标注、多维度分类筛选、产线/设备集群信息展示等需求（如同时展示某设备的运行状态、所属产线、维保等级等标签，或某工单的类型、优先级、处理状态等标签）。相较于单个标签组件，标签组可高效管理批量标签，且默认禁用"可关闭"功能，保证信息展示的稳定性（如设备状态标签组不允许手动关闭，避免关键信息丢失）。
#### 前提条件
已在当前页面添加"标签组"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。
#### 配置入口
1. 在页面设计器的中心画布区，单击选中"标签组"组件。
2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002535567141.png)，即可展开"属性"设置面板。
 
#### 基础信息
| 属性名称 | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | 是否支持变量绑定 |
|:---|:---|:---|
| 数据   | 标签组的数据源，需传入一个对象数组。每个对象包含以下属性： - name：标签要显示的文本。  - type：标签的预设样式类型，不同类型对应专属视觉风格（颜色）。可选项： - success：成功/正常（绿色系）。  - info：信息/常规（蓝色系）。  - warning：警告/待处理（黄色系）。  - danger：危险/故障（红色系）。     | 是        |
| 主题   | 统一控制标签组内所有标签的视觉效果，可选值： - dark：深色背景，基于对应类型的主色。无类型时填充黑色背景。  - light：浅色背景，基于对应类型的主色。无类型时填充浅灰色背景。  - plain：无背景色，仅带边框，边框颜色基于对应类型的颜色。                                                                                                                                                                                                                                                                                                                                                                                                                                                          | 是        |
| 尺寸   | 统一设置标签组内所有标签的显示大小。可选项： - medium：中等尺寸，默认为"medium"。  - small：小尺寸。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | 是        |
   
#### 其他
如下属性适用于UI引擎所有组件，用于精细化控制。
| 属性名称   | 说明                                                                                                                                 | 是否支持变量绑定 |
|:---|:---|:---|
| 元素id值  | 对应HTML标签的"id"属性，同一页面内必须唯一。                                                                                                         | 是        |
| 样式类    | 对应HTML标签的"class"属性，为空格分隔的类名列表，用于自定义组件样式。默认为"component-base-style"。                                                                 | 是        |
| ref引用类 | 对应Vue的"ref"属性，用于注册模板引用以访问组件实例方法。 如果为"数据源表单"组件，会自动填充默认值。 | 是        |
   
#### 组件事件
| 事件名称        | 类型定义                                 | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
|:---|:---|:---|
| onItemClick | ``` (item, index, event) => void ``` | 单击标签组内单个标签时触发。 - item：当前单击标签的数据源对象（含name/type）。  - index：当前标签在数组中的索引。  - event：原生事件对象。   |
| onClick     | ``` (e: MouseEvent) => void ```      | 浏览器原生事件，单击标签组容器范围内的任意位置都会触发。                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| onChange    | ``` (e: MouseEvent) => void ```      | 浏览器原生事件，元素值改变时触发。 注意：此事件对标签组组件本身通常无效。                                                                                                                                                                                                                                                                                                                                                                                             |
| onFocus     | ``` (e: MouseEvent) => void ```      | 浏览器原生事件，组件获取焦点时触发。 **注意：**此事件对标签组组件本身通常无效。                                                                                                                                                                                                                                                                                                                                                                                          |
| onMousemove | ``` (e: MouseEvent) => void ```      | 浏览器原生事件，鼠标在标签组区域移动时触发。                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
   
