View states enable you to create dynamic interfaces by defining multiple states for your components. Each state can have its own layout, style, or behavior, and these states can be triggered based on conditions like props or user interactions.
Switch Between View States
Create multiple "view-states" to define how your UI should look under different conditions.
Each state can have unique layouts or styles.
Set Up Conditional Rules
Display or hide components dynamically based on props or user input.
Define rules to control when and how a state is triggered.
Interactive Previews
Switch between states to see how your UI adapts in real-time.
Navigate to the View States tab in the left-hand toolbar.
Click the '+' button and give it a name, e.g., isOpen.
You can work with view states in two modes:
View Mode: Enables previewing changes without affecting the state’s configuration. Any edits made in this mode will not be recorded.
Edit Mode: Allows you to modify the canvas, and all changes will be saved as part of the active view state.
When designing responsive UIs, view states help you define layouts for different breakpoints.
Switching breakpoints in the editor (e.g., desktop to mobile) navigates between corresponding view states (lg, md, xs, etc.).
Any changes made in a specific breakpoint are automatically recorded in the relevant view state.
To dynamically trigger view states of a custom component from a parent component:
Add a prop to the custom component from the parent canvas with the same name as the view state, e.g., isOpen.
Set the prop type to boolean.
When the prop is set to true, the corresponding view state will activate.
Simplifies the process of creating dynamic UIs.
Enables responsive design directly in the editor.
Reduces the need for complex code by leveraging props and visual editing.
You've mastered conditional rendering! Let's move on:
Last updated
