Accordion

Accordion and Accordion Item work together to provide a vertically stacked list of headers that reveal or hide associated sections of content.

Usage

import { VAccordion, VAccordionItem } from '@vonage/vivid-vue';

import { registerAccordion } from '@vonage/vivid';
import { registerAccordionItem } from '@vonage/vivid';

registerAccordion('your-prefix');
registerAccordionItem('your-prefix');

Heading level

Use the heading-level to set level of the Accordion Item's headline element to ensure accessible heading levels.

Methods

Close All

Use the closeAll method on Accordion to programatically close all open Accordion Item's.

Slots

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.

Icon Slot

Heading Slot

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.

Meta Slot

Set the meta slot to add additional content to the accordion item's heading. If set, the meta attribute is ignored.

CSS Variables

Meta Data Inline Size

Use the --accordion-item-meta-inline-size to control the width of the meta-data slot content. The defaut value is 20%

API Reference

accordion

Properties

Property	Type	Default	Description
expandmode	`'single' \| 'multi'`		Determines if multiple items or a single item can opened at once

Property	Type	Default	Description
expand-mode	`'single' \| 'multi'`		Determines if multiple items or a single item can opened at once

Slots

Name	Description
default	Default slot.

Name	Description
default	Default slot.

Events

Event	Type	Description
blur	`FocusEvent`	Fires when the element loses focus.
change	`CustomEvent<string \| null>`	Fires a custom 'change' event when the active item changes
click	`MouseEvent`	Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focus	`FocusEvent`	Fires when the element receives focus.
input	`Event`	Fires when the value of an element has been changed.
keydown	`KeyboardEvent`	Fires when a key is pressed.
keyup	`KeyboardEvent`	Fires when a key is released.

Name	Type	Description
blur	`FocusEvent`	Fires when the element loses focus.
change	`CustomEvent<string \| null>`	Fires a custom 'change' event when the active item changes
click	`MouseEvent`	Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focus	`FocusEvent`	Fires when the element receives focus.
input	`Event`	Fires when the value of an element has been changed.
keydown	`KeyboardEvent`	Fires when a key is pressed.
keyup	`KeyboardEvent`	Fires when a key is released.

Methods

Name	Params	Returns	Description
closeAll		`void`

accordion-item

Properties

Property	Type	Description
appearance	`'ghost' \| 'filled' \| 'ghost-light'`	The appearance the button should have.
expanded	`boolean`	Expands or collapses the item.
heading	`string`
headinglevel	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	Configures the https://www.w3.org/TR/wai-aria-1.1/#aria-level \| level of the heading element.
icon	`IconId`	A decorative icon the custom element should have. See the [Vivid Icon Gallery](/icons/icons-gallery/) for available icons and `icon-name`s See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
iconTrailing	`boolean`	Indicates the icon affix alignment.
id	`string`	The item ID
meta	`string`
noIndicator	`boolean`	Indicates whether the accordion-item has indicator
size	`'condensed' \| 'normal'`	The size the accordion-item should have.

Property	Type	Description
appearance	`'ghost' \| 'filled' \| 'ghost-light'`	The appearance the button should have.
expanded	`boolean`	Expands or collapses the item.
heading	`string`
heading-level	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	Configures the https://www.w3.org/TR/wai-aria-1.1/#aria-level \| level of the heading element.
icon	`IconId`	A decorative icon the custom element should have. See the [Vivid Icon Gallery](/icons/icons-gallery/) for available icons and `icon-name`s See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
icon-trailing	`boolean`	Indicates the icon affix alignment.
id	`string`	The item ID
meta	`string`
no-indicator	`boolean`	Indicates whether the accordion-item has indicator
size	`'condensed' \| 'normal'`	The size the accordion-item should have.

Slots

Name	Description
default	Default slot.
heading	Used to add content to the heading.
icon	The preferred way to add an icon to the component.
meta	Used to add additional content to the heading.

Name	Description
default	Default slot.
heading	Used to add content to the heading.
icon	The preferred way to add an icon to the component.
meta	Used to add additional content to the heading.

Events

Event	Type	Description
blur	`FocusEvent`	Fires when the element loses focus.
change	`CustomEvent<undefined>`	Fires a custom 'change' event when the button is invoked
click	`MouseEvent`	Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focus	`FocusEvent`	Fires when the element receives focus.
input	`Event`	Fires when the value of an element has been changed.
keydown	`KeyboardEvent`	Fires when a key is pressed.
keyup	`KeyboardEvent`	Fires when a key is released.

Name	Type	Description
blur	`FocusEvent`	Fires when the element loses focus.
change	`CustomEvent<undefined>`	Fires a custom 'change' event when the button is invoked
click	`MouseEvent`	Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focus	`FocusEvent`	Fires when the element receives focus.
input	`Event`	Fires when the value of an element has been changed.
keydown	`KeyboardEvent`	Fires when a key is pressed.
keyup	`KeyboardEvent`	Fires when a key is released.