Overview
One key feature of Play’s components is their ability to have multiple states that look and behave differently. Each state has the same structure of objects, but you can adjust the properties of those objects across the states. For example, a button can be gray in the default state and blue in the selected State.
States are helpful for creating complex interactions that react to user input. Use the Set State action to animate between certain states or cycle through all states.
You might use states to represent variations of a component, such as “primary” and “secondary” buttons. You might also use states to represent the status of an interactive component, such as “pressed”, “disabled”, and “active”.
Adding a State
macOS
Add a state by clicking on the pink drop-down menu in the component’s object toolbar and hovering over “New State.” From here, you can add a custom state.
iOS
Tap the component name to open the state list. Add a custom state by tapping the plus sign under “Custom States.”
Managing States
From the Main Component
Any edits you make to any states of the main component will affect the states of all instances.
When you add an object to your component when you have multiple existing states, all states will inherit the object's properties from the Default state. You can create overrides on the other states.
From a Component Instance
Every instance has the same states as the main component, but you can override the properties of any state on any instance.
You can add a state from an instance, and it will automatically be added to the main component. Every instance will have access to the new state.
Likewise, if you delete a state from an instance, that state will also be deleted from the main component and any other instances.
Deleting States
Note: You cannot delete the Default state.
From the Main Component Editor
Delete a state from the main component editor either by
Select the state and click the Trash icon.
Right clicking on the component state and selecting "Delete State."
Make sure you're right clicking on the component state, not above it, below it, or on a child of the component. If you are not right clicking on the component state itself, the "Delete State" option will not be available.
From the Canvas
Delete a state from the canvas by changing the state from the state drop down, then selecting "Delete" from the same dropdown once that state is active.
