Accordion
Accordion and Accordion Item work together to provide a vertically stacked list of headers that reveal or hide associated sections of content.
import { VAccordion, VAccordionItem } from '@vonage/vivid-vue';
import { registerAccordion } from '@vonage/vivid';
import { registerAccordionItem } from '@vonage/vivid';
registerAccordion('your-prefix');
registerAccordionItem('your-prefix');
Use the heading-level to set level of the Accordion Item's headline element to ensure accessible heading levels.
Use the closeAll method on Accordion to programatically close all open Accordion Item's.
The HTML specification does not allow one interactive element to be nested within another. Therefore, you should not use any links or buttons inside heading or meta slots.
Use the heading slot to add custom content to the Accordion Item's heading, allowing you to apply custom formatting.
If set, the heading attribute is ignored.
Set the meta slot to add additional content to the accordion item's heading.
If set, the meta attribute is ignored.
Use the --accordion-item-meta-inline-size to control the width of the meta-data slot content. The defaut value is 20%
Properties
| Name | Type | Description |
|---|---|---|
| expand-mode | single (default), multi |
Determines if multiple items or a single item can opened at once |
Methods
| Name | Returns | Description |
|---|---|---|
| closeAll | void |
When expand-mode is set to multi, closes all the accordion items from the open state. |
Properties
| Name | Type | Description |
|---|---|---|
| heading | string |
Sets the text for the heading |
| heading-level | 1, 2 (default), 3, 4, 5, 6 |
Determines the heading level |
| (deprecated as of 05/25) icon |
Enum: [icon-name] |
A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons and icon-names |
| expanded | boolean |
Sets the open state |
| meta | string |
Sets the meta text for the heading |
| no-indicator | boolean |
Hides the open state indicator icon (chevron) |
| size | normal (default), condensed |
Sets the size |
| appearance | ghost (default), filled, ghost-light |
Controls the appearance |
Slots
| Name | Description |
|---|---|
| icon | Add an icon to the component |
Events
| Name | Type | Bubbles | Composed | Description |
|---|---|---|---|---|
| change | CustomEvent<undefined> |
Yes | Yes | Fires a custom 'change' event when the button is invoked |