Pages

页面

按钮：状态按钮（State Button）

描述

状态按钮（State Button） 是一种动态 UI 控件，能够根据预定义的条件动态改变其标签（label）、图像（image）和行为（execute）。

与静态按钮不同，它可以根据系统中的变量实时做出反应。
你可以使用 JavaScript 逻辑定义多个视觉和功能状态。

主要功能

基于状态的行为

• 使用 JavaScript 定义多个条件
• 动态更改以下属性：
  • 标签文本（label）
  • 图像（image）
  • 执行逻辑（execute）

动态执行

• 每个状态可触发不同的操作
• 示例逻辑：
  “如果系统正在运行 → 停止，否则 → 启动”

外观自定义

• 根据状态显示不同的图标、文字或颜色
• 帮助用户更好理解当前按钮功能

无缝集成

• 可通过 Connection String 绑定到任何变量
• 适用于实时监控与控制系统（如 HMI 或 SCADA）

使用场景示例

最小 JavaScript 示例

假设按钮连接到变量 systemActive，以下代码定义了两个状态：

if (systemActive === true) {
  label = "Stop";
  image = "stop_icon.svg";
  execute = "stopProcess()";
} else {
  label = "Start";
  image = "start_icon.svg";
  execute = "startProcess()";
}