Ask AI
Skip to main content

Add classes

Function: Add classes​

This action allows you to dynamically add one or more visual styles (CSS classes) to specific user interface (UI) elements in your application. This is useful for changing the appearance of elements based on certain conditions, such as highlighting a field when it's invalid, showing or hiding content, or applying different themes.

Input​

  • Elements: A list of UI elements you want to modify. For each element in the list, you can specify:
    • Element: The specific UI element you want to target.
    • Conditional: (Optional) A True/False condition. If this condition is set and evaluates to True, or if it's not set at all, the classes will be added to the element. If the condition is False, the classes will not be added to that specific element.
  • Classes: A list of text values, where each text value represents a CSS class name you want to add to the selected elements.

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: Highlight an invalid input field​

Imagine you have a form where a user needs to enter their email address. If the email format is incorrect, you want to highlight the input field in red.

  • Inputs:
    • Elements:
      • Element 1:
        • Element: Email Input Field (e.g., a text input component named "EmailAddressInput")
        • Conditional: Is EmailAddressInput.isValid = False (This condition checks if the email input field's value is not valid)
    • Classes:
      • invalid-field (Assuming you have a CSS class named invalid-field that applies a red border)
  • Result: If the user types an invalid email address, the Email Input Field will immediately have the invalid-field style applied, making its border turn red.

Example 2: Show a "New" badge on recently added products​

You have a product listing page, and you want to display a "New" badge next to products that were added in the last 24 hours.

  • Inputs:
    • Elements:
      • Element 1:
        • Element: Product Card 1 (e.g., a container component for the first product)
        • Conditional: Product1.DateAdded > CurrentDate - 24 hours
      • Element 2:
        • Element: Product Card 2
        • Conditional: Product2.DateAdded > CurrentDate - 24 hours
      • (...and so on for all product cards)
    • Classes:
      • badge-new (A class that styles a "New" badge)
  • Result: Only the product cards for products added within the last 24 hours will have the badge-new style applied, visually indicating they are new arrivals.

Example 3: Apply a dark theme to a section based on user preference​

Your application allows users to switch between a light and dark theme. When a user selects the dark theme, you want to apply a dark-mode class to the main content area.

  • Inputs:
    • Elements:
      • Element 1:
        • Element: Main Content Area (e.g., a container component named "AppContent")
        • Conditional: CurrentUser.ThemePreference = "Dark"
    • Classes:
      • dark-mode (A class that defines dark background and light text colors)
  • Result: If the current user's theme preference is set to "Dark", the Main Content Area will have the dark-mode style applied, changing its appearance to the dark theme.