Appearance
Accordions
There are 3 types of accordions:
- Display Accordion
- Text Accordion
- Data Accordion
INFO
These components are partially adopted from PrimeVue. Its 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";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. |
Slots
| Name | Purpose |
|---|---|
| xer-accordion-header | The accordion header |
| xer-accordion-panel | The accordion panel |
INFO
When provided, the slots will overrule the accordionContent prop.
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";