44 lines
1.0 KiB
Markdown
44 lines
1.0 KiB
Markdown
### 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:
|
|
|
|
```html
|
|
|
|
<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:
|
|
|
|
```html
|
|
|
|
<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";
|
|
|