# 设置UI引擎前端页面标签页组件属性
标签页组件是UI引擎提供的高效工具之一，适用于设备多维度数据展示（如运行参数、故障记录、维护日志）、工艺流程多角度切换（如设计图纸、操作步骤、质量检测）、生产数据分类查询（如实时产量、能耗统计、良率分析）等工业场景。该组件支持页签的增删改排与多样式切换，可有效优化页面布局结构，提升工业数据的浏览效率与交互体验。
#### 前提条件
已在当前页面添加"标签页"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。
#### 配置入口
1. 在页面设计器的中心画布区，单击选中"标签页"组件。
2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002535445625.png)，即可展开"属性"设置面板。
 
#### 基础信息
此部分配置定义标签页组件的核心结构、视觉样式与交互特性。
| 属性名称      | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | 是否支持变量绑定 |
|:---|:---|:---|
| 页签项设置     | 用于管理标签页的所有页签项，支持完整的增删改查与排序功能。 - 新增：单击"添加页签项"，即可添加新的页签项。  - 编辑：单击目标页签项的"名称"激活编辑模式，修改后失焦自动保存。  - 删除：单击目标页签项右侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002503565830.png "点击放大")，删除当前页签项。 **注意** **：**删除无二次确认提示，页签下绑定的工业数据内容会被连带删除，操作需谨慎。   - 排序：鼠标拖动目标页签项左侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002535565285.png)，可调整页签展示顺序。   | 否        |
| 页签标题的最大宽度 | 单个页签标题的最大显示宽度（单位：px），超出宽度的文本会自动溢出隐藏，鼠标悬浮时以"tooltip"形式展示完整内容。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | 否        |
| 页签类型      | 用于定义标签页的视觉样式与交互风格。可选类型如下： - 默认：默认样式，基础的下划线式标签页，简洁通用。  - card类型：卡片样式，带有边框的卡片外观，具有更强的视觉区分度，适合需要突出每个标签的情况。  - bordercard类型：填充卡片样式，在卡片样式的基础上增加背景色填充，突出当前选中状态。  - button-card类型：按钮卡片样式，将标签页设计为按钮形态，提升单击交互感。                                                                                                                                                                                        | 否        |
   
#### 其他
如下属性适用于UI引擎所有组件，用于精细化控制。
| 属性名称   | 说明                                                                                                                                 | 是否支持变量绑定 |
|:---|:---|:---|
| 元素id值  | 对应HTML标签的"id"属性，同一页面内必须唯一。                                                                                                         | 是        |
| 样式类    | 对应HTML标签的"class"属性，为空格分隔的类名列表，用于自定义组件样式。默认为"component-base-style"。                                                                 | 是        |
| ref引用类 | 对应Vue的"ref"属性，用于注册模板引用以访问组件实例方法。 如果为"数据源表单"组件，会自动填充默认值。 | 是        |
   
#### 组件事件
| 事件名称        | 类型定义                                            | 说明                                                                                                                                                                                                                                                                                                                                                                           |
|:---|:---|:---|
| onClick     | ``` (TabItem: Object, event: Event) => void ``` | 单击页签时触发的事件。 - TabItem：被单击页签的完整数据对象，包含页签名称、排序索引等属性。  - event：浏览器原生单击事件对象。   |
| onChange    | ``` (...args: any) => void ```                  | 组件值发生变化时触发。 仅部分组件支持此事件，具体参数由组件实现决定。适用于输入框、下拉选择器等表单组件。                                                                                                                                                                                                                                                                         |
| onFocus     | ``` (e: Event) => void ```                      | 元素获得焦点时触发。 传递标准的浏览器"Event"或"MouseEvent"对象，适用于输入框等表单元素。                                                                                                                                                                                                                                                                        |
| onMousemove | ``` (e: Event) => void ```                      | 鼠标在组件区域内移动时触发。 实时追踪鼠标在组件区域内的移动轨迹，兼容所有可视化组件，适用于拖拽、悬浮提示、轨迹追踪等场景。                                                                                                                                                                                                                                                                 |