States
Widget can have "states" which can contain visual properties and have also a unique name.
There is the "CSS State" (Palette/xblox/Controls/CSSState). It has to be a child element of a widget and it has 2 modes it can operate:
The "cssClass" mode will add a css class to the parent widget when selected:
<button label="PlayState" state="off">
<d-xstate-css name="off" cssClass="offClass"></d-xstate-css>
</button>
This will set the state "off" on the button and it will add the CSS class "offClass";
The "inline CSS" mode will create dynamic CSS to the document, specified in the inner text on the CSS state:
<button label="PlayState" state="off">
<d-xstate-css name="off" >
.foo{
color:red;
}
</d-xstate-css>
</button>
This will set the state "off" on the button and adds a dynamic CSS class with the declarations "color:red";