When using the prototype features, variables are a great way to allow dynamic designs. Unfortunately, using variables like this gets very unwieldy very fast. Consider this example:
I have an radiobutton component, which has a boolean “checked” property.
Based on the radio button, I want to change the variant property of a button, which has the variant property “style” with values “inactive”, “active”, and “disabled”.
So on each radio button, I need to define something like this:
- On click:
- Set Variable “radiobutton-1-checked” to “true”
- Set Variable “radiobutton-2-checked” to “false”
- Set Variable “button-state” to “inactive”
Even with this minimal example I need to set three different variables so that each component gets its correct state.
It would be so much easier if one could apply an expression in place of a variable. Then one would only need to set one variable e.g. “enable-button” to “true” and instead apply the expression “enable-button equal to true” or “enable-button equal to false” on the boolean properties. (As a side note: simply writing “enable-button” and “! enable-button” would even be nicer).
For Variant properties, a new syntax would be needed, though. Maybe a ternary operator would work: “(enable-button == true) ? “inactive” : “disabled””