Add classes

Function: Add classes

This action allows you to dynamically change the appearance of your user interface (UI) elements by adding styling classes to them. These classes, often defined in your application's styling rules, can alter colors, fonts, sizes, or any other visual property, making your application more interactive and responsive.

Input

• Elements (List of Elements): This is a list of the specific UI components you want to modify. For each element in the list, you can specify:
  • Element (UI Element): The individual UI component (e.g., a button, a text field, a panel) that you want to apply classes to.
  • Conditional (True/False): An optional setting. If you provide a condition here, the classes will only be added to this specific element if the condition evaluates to True. If left empty, the classes will always be added to the element.
• Classes (List of Text): This is a list of the names of the styling classes you want to add. Each item in this list should be a single class name (e.g., "highlight", "active", "error-message").

Output

This action does not produce any direct output. Instead, it modifies the visual appearance of the specified UI elements within your application.

Execution Flow

Real-Life Examples

Example 1: Highlighting a Selected Item

Imagine you have a list of items, and when a user clicks on one, you want it to stand out.

• Inputs:
  • Elements:
    • Element: The specific list item (e.g., "Product_Item_123") that was just clicked.
    • Conditional: (Leave empty, as we always want to highlight the clicked item)
  • Classes:
    • "selected-item"
• Result: The "selected-item" class is added to "Product_Item_123", making it appear with a different background color and bold text, indicating it's currently selected.

Example 2: Showing an Error State for Invalid Input

You have a form where users enter their email address. If the email format is incorrect, you want to visually indicate an error.

• Inputs:
  • Elements:
    • Element: The "Email_Input_Field" UI component.
    • Conditional: A condition that checks if the "Email_Input_Field"'s value is not a valid email format (e.g., Email_Input_Field.isValid == False).
  • Classes:
    • "error-border"
    • "text-danger"
• Result: If the email entered is invalid, the "error-border" class adds a red border around the "Email_Input_Field", and the "text-danger" class changes the text color to red, clearly showing the user there's an issue.

Example 3: Applying Multiple Styles to a Group of Elements

You have a dashboard with several data cards. When a user applies a filter, you want to visually dim cards that don't match the filter and add a "filtered" badge to those that do.

• Inputs:
  • Elements:
    • Element: "Data_Card_A"
    • Conditional: A condition that checks if "Data_Card_A" matches the current filter (e.g., Data_Card_A.matchesFilter == True).
    • Element: "Data_Card_B"
    • Conditional: A condition that checks if "Data_Card_B" matches the current filter (e.g., Data_Card_B.matchesFilter == True).
    • Element: "Data_Card_C"
    • Conditional: A condition that checks if "Data_Card_C" matches the current filter (e.g., Data_Card_C.matchesFilter == True).
  • Classes:
    • "filtered-badge"
    • "highlight-border"
• Result: Only the data cards that match the filter (e.g., "Data_Card_A" and "Data_Card_C") will have the "filtered-badge" and "highlight-border" classes added, making them visually distinct from the other cards.