Accordions
There are 3 types of accordions:
- Display Accordion
- Text Accordion
- Data Accordion
INFO
This component are partially adopted from PrimeVue. It's full documentation can be found here. In case there are missing features of the XerAccordion component, please contact the Codey team.
Display Accordion
The display accordion is a simple accordion that can be used to display extra information.
javascript
import { XerDisplayAccordion } from "@xerius/codey-components";TODO
Convert to PrimeVue based Accordion
Showcases
With Content Object
With Slots
With Slots Custom Html
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| accordionContent | Object | { header: 'Header', panelText: 'Panel text'} | false | The accordion content, header and panel |
| dataAutomationId | String | accordion | false | The data automation id. |
Automation Ids
INFO
The prefix accordion depends on the dataAutomationId prop.
| Name | Purpose |
|---|---|
| accordion-header | The header element of the accordion. |
| accordion-panel | The panel holding the content. |
Text Accordion
The text accordion is intended to give more pure text information about different topics.
javascript
import { XerTextAccordion, XerAccordionTab } from "@xerius/codey-components";Showcases
Default Text Accordion
Data Accordion
The data accordion is intended for data display and. A row template XerDataAccordionContentRow is provided to display data within the XerAccordionTab.
javascript
import {
XerDataAccordion,
XerAccordionTab,
XerDataAccordionContentRow,
} from "@xerius/codey-components";