Appearance
Element States
WP-Nexus supports multiple element states, allowing you to define different styles for interactive states (hover, focus, active) and custom expression-based states.
Built-in States
Default
The base state. Styles set here apply when no other state is active.
Hover
Applies when the user's mouse pointer is over the element. Corresponds to the CSS :hover pseudo-class.
Common use: changing background color, text color, or adding a shadow on hover.
| Property | Default | Hover |
|---|---|---|
backgroundColor | #f5f5f5 | #e0e0e0 |
color | #333 | #000 |
Focus
Applies when the element has keyboard focus (e.g., tabbed to with the keyboard). Corresponds to the CSS :focus pseudo-class.
Common use: adding an outline or border color change for accessibility.
| Property | Default | Focus |
|---|---|---|
borderColor | #ccc | #0066cc |
borderWidth | 1px | 2px |
Active
Applies while the element is being clicked or pressed. Corresponds to the CSS :active pseudo-class.
Common use: a slightly darker background or a subtle scale transform for "pressed" feedback.
| Property | Default | Active |
|---|---|---|
backgroundColor | #0066cc | #004999 |
opacity | 1 | 0.9 |
Custom States (CSS Classes)
Custom states allow you to apply CSS classes to an element conditionally, based on an expression that evaluates per row. This is defined as a list of class-expression pairs.
How Custom States Work
Each custom state entry has:
| Property | Description |
|---|---|
className | The CSS class to add when the expression is true. |
expression | An expression evaluated against the current data context. |
When the expression evaluates to a truthy value, the class is added to the element's class list.
Examples
Highlight active items:
className: "is-active"
expression: "row.status == 'active'"Mark overdue items:
className: "is-overdue"
expression: "row.due_date < today()"Favorite indicator:
className: "is-favorited"
expression: "in_store('favorites', row.id)"Low stock warning:
className: "low-stock"
expression: "row.quantity < 5"Styling Custom Classes
Custom classes can be styled using additional CSS in your theme or via the WP-Nexus style editor. The class is added alongside the element's generated class, so you can target it with CSS rules.
State Priority
When multiple states are active simultaneously, they are applied in order of specificity:
- Default -- Base styles
- Custom classes -- Applied additively
- Focus -- Overrides default
- Hover -- Overrides default and focus
- Active -- Highest priority (overrides all)
Best Practices
- Always provide a visible focus state for interactive elements (buttons, links, inputs). This is critical for keyboard accessibility.
- Keep hover changes subtle. A slight color shift or shadow is usually enough. Avoid dramatic layout changes on hover.
- Use active state for click feedback. A slightly darker color or reduced opacity confirms the click action.
- Use custom states for data-driven styling. Instead of complex conditional expressions in every property, apply a CSS class and style it once.