States are a powerful way to create expressive groups of variables. However, some UI elements may require a combination of states to be applied simultaneously.
For example, consider creating a CheckBox element. This CheckBox may have one set of states for whether it is checked:
But it may also need a second set of states for being enabled and disabled (which may modify the color of the Text and graphics for the check box:
In this case the states may need to coexist. Categories allow you to organize states so that multiple states can be set simultaneously.
For this tutorial we’ll create a new component. This component will have state categories for size and for color. To do this:
Now we can add states to the categories. To do this:
Now that we have states set up we need to add a visual element to the component so that we can see our changes.
To do this, drag+drop a ColoredRectangle into your component
Just like with states which do not belong to categories, you can simply select a state and edit in the preview window or change properties in the Variables tab to modify what the state sets. Notice that normally for a component like this the ColoredRectangleInstance would have its width and height be relative to its container, but we’re not doing this for the sake of keeping the tutorial shorter.
First we’ll set the Size states. To do this:
Next we’ll set the Color states. To do this:
Now that we have our CategoryDemo component set up with multiple categories, we can view these states on any CategoryDemo instance. To do this: