Accordion API

This page provides an overview of the Accordion component API, detailing its props, emits, slots, and exposed methods/states.

Props

The Accordion component accepts the following props:

Prop	Default	Type	Description
`dataSource`	`[]`	`Array<AccordionItem>` or `undefined`	The list of sections to display in the accordion. Each item should be an `Array<AccordionItem>`.
`multiple`	`false`	`boolean` or `undefined`	Allows multiple sections to be open at the same time.
`animationDuration`	`300`	`number` or `undefined`	The duration of the open/close animation in milliseconds.
`icon`	`"Plus"`	`"ChevronDown"` or `"ArrowDownCircle"` or `"Plus"` or `undefined`	The type of icon displayed to indicate the toggle state of the accordion.
`class`	`""`	`StyleClass` or `undefined`	Custom CSS class for the root accordion container.
`classItem`	`""`	`StyleClass` or `undefined`	Custom CSS class for individual accordion items.
`classTitle`	`""`	`StyleClass` or `undefined`	Custom CSS class for the title of each accordion item.
`classSubtitle`	`""`	`StyleClass` or `undefined`	Custom CSS class for the subtitle of each accordion item.

Each item in the dataSource array should follow the AccordionItem structure:

Field	Type	Description
`title`	`string`	The main title of the accordion section.
`subtitle`	`string` or `undefined`	Optional subtitle or content for the section.
`open`	`boolean` or `undefined`	Indicates whether the section is initially open.
`template`	`string` or `undefined`	Optional slot name for custom content inside the section.
`[key: string]`	`any`	Any additional properties to include in the item.

The Accordion component provides the following slots:

Slot	Payload	Description
`title`	`{ title: string }`	A slot for customizing the title of each accordion item.
Dynamic Slots	`{ ...AccordionItem }`	A dynamic slot based on the `template` field in an `Array<AccordionItem>`. Allows custom content for specific sections.

The Accordion component emits the following events:

Event	Payload	Description
`toggle`	`Array<AccordionItem>`	Emitted whenever a section is opened or closed. The payload contains the updated accordion data.

The Accordion component exposes the following methods and states via ref:

Expose	Value	Description
`dataItems`	`Array<AccordionItem>`	The current state of the accordion items.
`multiple`	`boolean`	Indicates whether multiple sections can be open at the same time.
`animationDuration`	`number`	The duration of the open/close animation in milliseconds.
`icon`	`string`	The current type of icon used for the accordion toggle.
`classBody`	`string`	The CSS class applied to the accordion container.
`classItem`	`string`	The CSS class applied to individual accordion items.
`classTitle`	`string`	The CSS class applied to the title of each accordion item.
`classSubtitle`	`string`	The CSS class applied to the subtitle of each accordion item.
`toggle`	`(key: string \| number) => void`	Toggles the state (open/close) of a specific accordion section by key.