(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.
- It organizes information into expandable and collapsible sections.
- Each accordion item (child component) has a title that remains visible.
- The content of each section can be expanded or hidden.
[IMAGE PLACEHOLDER: Accordion with expanded and collapsed items]
Specs
Tokens
| Token |
Description |
| displayName |
Display name of the component shown in the structure panel |
| elements |
Defines the configuration of accordion items |
| paddingClass |
Configures spacing around accordion content with CSS classes |
| dataTestId |
Testing hook ID for automated testing |
| events |
Configurable event triggers and responses |
| ON_INIT (Event) |
Triggered when the accordion is initialized |
| ON_DESTROY (Event) |
Triggered when the accordion is removed from the DOM |
Structure
- The accordion is made up of an array of DynamicAccordionItemComponent objects.
- Each item contains a title that is always visible.
- Each item also contains content that can be expanded or collapsed.
[IMAGE PLACEHOLDER: Accordion layout showing items with title and expandable content]
Styling
(Configured in Visual 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.
- 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.
Actions & Variants
(Configured in 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.
[IMAGE PLACEHOLDER: Accordion lifecycle with ON_INIT and ON_DESTROY events]
Tests
(Configured in 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.
[IMAGE PLACEHOLDER: Example of component with testing ID shown in inspector]
Guidelines
[NO DATA AVAILABLE]
Accessibility
[NO DATA AVAILABLE]