Home > Article > Web Front-end > How to Bind Color Changes to a Control\'s Class Attribute in XML View?
Binding in Control with "class" Attribute: Workaround for XML View
In XML view, binding the class property of a control directly is not supported. To achieve the desired color change based on a value, you can leverage custom data as a workaround.
Step 1: Add Custom Data with writeToDom
Within your control, add custom data with the writeToDom property set to the expression binding that determines the color. For example:
<code class="xml"><Text class="myTextColor"> <customData> <core:CustomData writeToDom="{= ${HintTable>IS_ENABLED} === 'TRUE' ? 'data-green' : 'data-red'}" key="color" value="" /> </customData> </Text></code>
Step 2: Customize CSS with Attribute Selector
In your CSS, use an attribute selector to manipulate the color based on the data-green or data-red attribute added to the control. For instance:
<code class="css">.myTextColor[data-green] { color: green; } .myTextColor[data-red] { color: red; }</code>
Additional Considerations:
The above is the detailed content of How to Bind Color Changes to a Control\'s Class Attribute in XML View?. For more information, please follow other related articles on the PHP Chinese website!