Class actions

Overview

The Class Actions utility enables dynamic modification of an element’s class attribute based on various triggers, such as hover, click, or other supported events. With this utility, you can easily:

• Add: Add a class to an element.
• Remove: Remove a class from an element.
• Toggle: Toggle a class on and off.
• Replace: Replace an existing class with a new one.

This feature allows for more interactive behaviors without requiring JavaScript.

Syntax

• trigger: The interaction that activates the action (e.g., hover, click).
• action: The operation to perform (add, remove, toggle, or replace).
• class: Defines the target class attribute.
  • name: The class name to manipulate.

Examples

These examples demonstrate how to dynamically modify an element’s class attribute using triggers and actions.

add

The add action appends the specified class to the element. If the class already exists, no duplicate is created.

remove

The remove action removes the specified class from the element. If the class doesn’t exist, the action does nothing. In this case, the opacity-40 will be removed on click.

toggle

The toggle action switches the presence of a class on the element. If the class exists, it is removed; if it doesn’t, it is added.