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";