Skip to main content

How to Update CSS Classes Using Expressions


How do I dynamically update the CSS classes of my mobile screen in response to a UI interaction?


When developing your mobile app, the Style Classes property of widgets and containers is now an expression, instead of a text property only. This allows you to bind the Style Classes property with, for example, a local variable of the screen.

In the handler action of a screen event, you can assign any CSS class value to the local variable that is bound to the Style Classes property of the widget. The reactive model does the rest for you, meaning that the container is immediately rendered with the new CSS and the change propagates to the UI.

Since the Style Classes property is now an expression, you can even use an inline condition, or concatenate a static CSS class with a dynamic one. The expression can also include an input, which means that you can build blocks that have CSS classes as parameters, like in the following example.

Each AlertType record contains the CSS class value: