Accordion
Accordion components display collapsible content panels, allowing users to expand and collapse sections as needed.
They are ideal for organizing and presenting large amounts of information in a compact, space-saving format. Accordions are commonly used in FAQs, product descriptions, or any content-heavy pages where readability and user navigation are priorities.
Examples
Various examples showcasing different configurations of the component
This can be any component
This can be any component
This can be any component
Property
Value
Items
[{"title":"Item 1","viewId":"item1"},{"title":"Item 2","viewId":"item2"},{"title":"Item 3","viewId":"item3"}]
Properties
Each component can be customized and configured based on product requirements. You can modify the component on Canonic by clicking on the component and opening the configuration panel.
Property
Description
Default Value
Type
Elevation
The elevation level of the container.
1
String
BG Color
The background color of the container.
#FFFFFF
Color
Size
The size of the tabs.
Large
String
Items
The items to display in the accordion. These items can be powered dynamically or statically. Each item is a different accordion with it's own view.
List
Triggers
Components expose certain events such as clicking. You can use these events to perform actions such as navigation, fetching data and controlling other components. The events exposed by this component are listed below.
Property
Description
On click
Triggered when the card is clicked.
On double click
Triggered when the card is double clicked.