Managing States for Custom Components

ThemeBuilder provides a convenient means for adding and managing component state styles for your custom components. This allows you to add various styles that will be applied in response to user interactions like hovering over or focusing a button.

Adding states dynamically is currently supported only for custom components.

Adding or Removing States

  1. ith your custom component on the screen, select Advanced Edit.

  2. Drill-down to the desired custom component (for example, Login Button).

  3. Click the Advanced Editing button in the INTERACTIVE STATES section on the right.

    Open interactive states popup

  4. In the INTERACTIVE STATES SETTINGS popup, click the + button to add new states.

    Add interactive states

  5. To delete or edit an already added state, click its context menu button and select the desired action.

    Remove interactive states

Applying Styles to a State

Once you add the desired states to your custom component, you are ready to create their corresponding styles:

  1. Click the Advanced Editing button in the INTERACTIVE STATES section on the right.

    Open interactive states popup

  2. Put the component in the state that you want to edit by selecting the desired state in the INTERACTIVE STATES SETTINGS popup. Note that the COMPONENT PARTS tree displays the currently selected state in brackets, for example, Button(Active).

    Put component in state

  3. Edit the properties in the pane on the right. All displayed properties are applied to the currently selected state, for example, the active state.

In this article
Not finding the help you need?