更新时间:2026-03-16 GMT+08:00
分享

设置UI引擎前端页面分隔线组件属性

分割线组件是UI引擎提供的基础工具之一,用于对页面上的不同内容进行分隔,从而提升页面的层次感和可读性。适用于设备监控面板的参数分区、工艺流程的步骤分隔、数据报表的模块划分等工业场景。

前提条件

已在当前页面添加“分割线”组件,具体操作请参见为UI引擎前端页面添加物料组件

配置入口

  1. 在页面设计器的中心画布区,单击选中“分割线”组件。
  2. 在右侧设置面板中,单击,即可展开“属性”设置面板。

基础属性

用于定义分割线的文案内容、位置样式及线条样式,适配工业场景下的多样化分隔需求。

属性名称

说明

是否支持变量绑定

分隔线文案

需要在分隔线上显示的说明性文本。

留空时:仅显示纯分隔线。

文案位置

文案在分隔线上的对齐位置,默认为“中”。可选值:

  • 左:适用于模块标题居左的布局(如设备列表分区)。
  • 中:适用于核心模块的强调标注(如数据报表总览区)。
  • 右:适用于辅助信息的标注(如参数更新时间)。

文案颜色

分隔线文案的文本颜色,可配置为具体色值(如“#2f5496”工业蓝、“#d93600”告警红)。

文案背景色

分隔线文案的背景填充颜色。

分隔线样式

分隔线的视觉样式类型,默认为“实线”。可选值:

  • 实线:适用于常规功能区域分隔(如设备参数与操作按钮区)。
  • 虚线:适用于关联模块的弱分隔(如工艺流程的步骤衔接)。
  • 点线:适用于次要信息的辅助分隔(如报表的子项分区)。

分隔线颜色

分割线的线条颜色,可配置为与页面主题一致的颜色,或根据业务场景配置特殊颜色。

其他

如下属性适用于UI引擎所有组件,用于精细化控制。

属性名称

说明

是否支持变量绑定

元素id值

对应HTML标签的“id”属性,同一页面内必须唯一。

样式类

对应HTML标签的“class”属性,为空格分隔的类名列表,用于自定义组件样式。默认为“component-base-style”

ref引用类

对应Vue的“ref”属性,用于注册模板引用以访问组件实例方法。

如果为“数据源表单”组件,会自动填充默认值。

相关文档