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.

import { XerDisplayAccordion } from "@xerius/codey-components";

Showcases

With Content Object

With Slots

With Slots Custom Html

Props

Name	Type	Default	Required	Description
accordionContent	DisplayAccordionContent	{ header: 'Header', panelText: 'Panel text'}	false	The accordion content (header and panel)
dataAutomationId	String	"accordion"	false	The data automation id used for testing

In addition, all props from PrimeVue's Accordion component are supported. See the PrimeVue Accordion documentation for details.

Types

type DisplayAccordionContent = {
  header: string;
  panelText: string;
};

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.

Events

All events from PrimeVue's Accordion component are supported. See the PrimeVue Accordion documentation for details.

Automation Ids

The component includes the following automation IDs for testing:

Element	Automation Id
Main accordion	{dataAutomationId}
Header	{dataAutomationId}-header
Panel	{dataAutomationId}-panel

Text Accordion

The text accordion is intended to give more pure text information about different topics.

import { XerTextAccordion, XerAccordionTab } from "@xerius/codey-components";

Showcases

Default Text Accordion

Props

All props from PrimeVue's Accordion component are supported. See the PrimeVue Accordion documentation for details.

Slots

Name	Purpose
default	Where to place your XerAccordionTabs

Events

All events from PrimeVue's Accordion component are supported. See the PrimeVue Accordion documentation for details.

Data Accordion

The data accordion is intended for data display. A row template XerDataAccordionContentRow is provided to display data within the XerAccordionTab.

import {
  XerDataAccordion,
  XerAccordionTab,
  XerDataAccordionContentRow,
} from "@xerius/codey-components";

Showcases

Default Data Accordion

With Dynamic Tabs

With Click Handler

With Custom Root Element

Props

All props from PrimeVue's Accordion component are supported. See the PrimeVue Accordion documentation for details.

XerDataAccordionContentRow

When a @click event is set, the rootElement of the component will be changed to a button element when no is is specified.

Name	Type	Default	Required	Description
is	keyof HTMLElementTagNameMap	div	false	The root element used.

Slots

Name	Purpose
default	Where to place your XerAccordionTabs

Events

All events from PrimeVue's Accordion component are supported. See the PrimeVue Accordion documentation for details.