动态更改标题颜色

触发器类型： 简单 Actions 类型： 合并组件架构

当用户从列表中选择所需颜色时，此高级逻辑会更改文本字段组件的标签颜色。 使用自定义 CSS 文件应用此更改。

先决条件： 为表单的“ 自定义 CSS ” 属性字段中的文本字段添加包含新颜色的 CSS 类。

例如，下面的 CSS 代码片段包含一个将标签颜色设置为绿色或红色的类：

.textFieldLabel-green 
{
   color : green;
}
.textFieldLabel-red 
{
   color : red;
}

在“ 自定义 CSS ” 属性字段中引用 CSS 类后，请按照以下步骤设计表单：

1. 添加一个 文本字段 组件和一个 单选 组件。 在高级逻辑中使用这些属性时，请注意其 属性名称。
2. 在文本字段组件的“ 显示” 选项卡中，设置默认的 “ 自定义 CSS 类”。 例如，要将红色设置为文本字段的默认颜色，请使用 textFieldLabel-red 类。 必须在您为 先决条件 部分创建的 CSS 文件中定义该类。
   
   

   

   
   
3. 对于“ 单选” 组件，为颜色 green 和 red添加两个值。
4. 转到“ 文本字段 ”组件的“逻辑” 选项卡。
5. 添加一个逻辑并将其命名为 "color selection"。
6. 选择“ 简单” 触发器类型。
   1. 从“ When”表单组件 下拉菜单中，选择 Radio ({radio_field_key})。
   2. 在 “含值” 字段中，输入 "green"。
   上述配置会检测用户是否从单选选项中选择了 "green" ，并触发 Actions 更改文本字段标签颜色。
7. 添加操作并将其命名为 "change color using css"
8. 选择“ 合并架构组件 Actions ” 类型，然后输入以下代码片段：

   return { customClass: "textFieldLabel-green" }

9. 保存操作和逻辑。
10. 保存组件。

在 Runtime，如果业务用户选择 "green" 单选按钮，则文本字段的标签将变为绿色。 如果用户选择 "red" 单选按钮，则文本字段的标签将变为红色。