You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Current »

(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Accordion

Overview

The Dynamic Accordion component is a collapsible content container that organizes information into expandable and collapsible sections. This component provides an efficient way to present large amounts of content in a limited space by allowing users to expand only the sections they're interested in while keeping others collapsed. Each accordion item (child of this component) has a title that remains visible and content that can be shown or hidden.

Properties

General Properties

  • displayName - Sets the display name of the component shown in the structure panel. For example, "Product FAQ" allows for easy identification of the accordion's purpose in the component structure.

Visual Properties

  • elements - Defines the accordion items configuration for the accordion. This array contains DynamicAccordionItemComponent objects that make up the expandable sections. Each accordion item has its own properties including title and content.

  • paddingClass - Configures spacing around the accordion content using CSS classes. For example, "p-4" adds medium padding on all sides of the accordion for better visual separation from surrounding elements.

Testing hooks

  • dataTestId - Sets the testing hook ID for automated testing. For example, setting it to "faq-accordion" allows test scripts to reliably locate this component.

Event Actions

  • events - Configures the events that the component can trigger and respond to:
    • ON_INIT: Triggered when the accordion component is initialized. Can be used to perform setup operations like loading default data or setting initial states.
    • ON_DESTROY: Triggered when the accordion component is removed from the DOM. Useful for cleanup operations and releasing resources
  • No labels