States are a powerful feature of Replo which allow components to take on different styles in certain circumstances - for example, a button can have a different background color when the user hovers over it with their mouse.
To Add a State to a Component:
- Select the component you want to add a state to.
- Find "States" at the top of the right bar of editor.
- Click the "+" button to add a state.
- To add a Hover state, click the "On Hover" option.
- To add a different kind of state, click the "Add Custom" option.
Styling a State
To Modify the Styles that Appear Only When a State is Active:
- Select the state you want to modify (e.g., "Hover") under "States" at the top of the right bar of editor.
- Edit styles normally - these styles will only appear when the state is active.
- When you're done editing the state, click the "Default" state under "States" to return to normal editing.
Modifying the Styles of Components Inside Containers
When you're editing a State, all edits you make to the component that has that State, and any components inside it, apply only to that State.
For example, if you have a container with a hover State, and during the hover State you want to have a button inside that container change color, simply select the hover State, then click on the button and edit its styles. The style changes will apply only to the hover State of the container.
Different Types of States
There are several different types of states that can be added to a component.
- Hover: The most common type of state. This state is active when the user hovers over the component with their mouse.
- Pixels From Top Of Page: This state is active when the user has scrolled a certain number of pixels from the top of the page.
- Pixels From Top Of Viewport: This state is active when the user has scrolled a certain number of pixels from the top of the viewport.
- Hashmark: This state is active when the user has scrolled to a component with a specific URL hashmark. URL hashmarks are configurable on any Container under "Config" on the on the right side of the editor.
- No Condition: It's also possible to have States which are not automatically active. These States can be activated using the Activate State Interaction
To Edit the Type of a State:
- Find the State to edit, then select it.
- Click the "Pencil" icon to edit the State.
- Select the type of the State from the dropdown.
- Replo saves the update to your State automatically.