Modifier States - ZoboUI Docs

Modifier states are a crucial aspect of ZoboUI, allowing developers to define how UI elements react to various user interactions. These states include hover, focus, active, and others, each serving a specific purpose in enhancing the interactivity and responsiveness of the UI.

Default Modifier States

ZoboUI includes several default modifier states, each catering to a different type of user interaction:

:hover

Prefixing a utility class with hover_ will apply its styles only when the element is hovered over.

For example, the button below has a background color of red-500 by default, but when the cursor hovers over it, the background color changes to blue-600.

<ui:Button class="bg-red-500 hover_bg-blue-600" />

:active

Utility classes prefixed with active_ will only apply their styles when a user interacts with the element.

For example, the button below has a background color of green-500 by default, but when the user clicks on it, the background color changes to blue-600.

<ui:Button class="bg-gray-500 active_bg-blue-600" />

:focus

When a utility class is prefixed with focus_, its styles will only apply when the element is focused. This is useful for indicating which element has keyboard focus.

<ui:Button class="bg-blue-500 focus_border-red-600" />

<ui:TextField class="focus_border-red-600" />

:disabled

When a utility class is prefixed with disabled_, its styles will only apply when the element is disabled.

<ui:Button class="bg-blue-500 disabled_bg-gray-400 disabled_text-gray-800 " />

:enabled

When a utility class is prefixed with enabled_, its styles will only apply when the element is enabled.

:checked

When a utility class is prefixed with checked_, its styles will only apply when the element is checked. This is useful for styling checkboxes and radio buttons.

<Toggle class="checked_bg-red-400 " />

You should know!

This is a deliberately over-simplified version of how the :checked pseudo-class works in Unity. In reality, applying styles to a checked element requires a bit more work with ZoboUI classes.

This is because Unity's default UI elements dynamically generate or instantiate nested elements, so when a checkbox is checked, the :checked pseudo-class is applied to top level element, not the checkbox itself. You can't directly apply :checked classes to the nested elements, because they're dynamically generated and Unity assumes you'll be making use of child and descendant selectors to style them.

Learn more about how to handle this here.

:inactive

Utility classes prefixed with inactive_ will only apply their styles when a user is no longer interacting with the element.

UXML Example with Modifiers

Here's how a button with a hover state might be defined in UXML:

<ui:Button  class="bg-zinc-800 hover_bg-zinc-900" />

This reads as follows: the button has a background color of zinc-800 by default, but when the cursor hovers over it, the background color changes to zinc-900.

ZoboUI's modifier states provide a powerful and flexible way to create responsive and interactive UIs. The ability to customize and extend these modifiers ensures that your UI can adapt to specific requirements and behaviors, making your user interface dynamic and engaging. By leveraging these states, you can craft a user experience that is both intuitive and visually appealing, catering to a wide range of interaction patterns.