Accordions - AvAccordion

✨ Introduction

The AvAccordion allows users to show and hide sections of content presented on a page.

🏗️ Structure

An accordion consists of the following elements:

• a header (prop title, of type string), corresponding to the section title - mandatory.
• an icon, indicating when the panel is closed and when it is open.
• a separator
• a content area, hidden by default, that can contain any type of element; the default slot is designed for this.

🏷️ Props

Name	Type	Default	Mandatory	Description
id	string	accordion-${crypto.randomUUID()}		Unique id of the accordion.
title	string		✅	Title of accordion displayed.
icon	string	undefined		Accordion icon.
headingLevel	'h2' | 'h3' | 'h4' | 'h5' | 'h6'	'h3'		Heading level for the accordion title.
overflowVisible	boolean	false		Whether the overflow of the accordion content should be visible when expanded.
triggerBorderColor	string	'transparent'		Border color of the accordion trigger. If set to 'transparent', the trigger will have no border and the arrow will inherit the text color.

🔊 Events

None.

🎨 Slots

Name	Description
default	Default slot for accordion content.

🚀 Storybook demos

You can find examples of use and demo of the component on its dedicated Storybook page.

💡 Examples of use

<template>
  <AvAccordionsGroup>
    <AvAccordion
      title="Accordion 1"
      icon="mdi:file-document-multiple-outline"
    >
      <span>First accordion content</span>
    </AvAccordion>
    <AvAccordion
      title="Accordion 2"
      icon="mdi:plus-circle-outline"
      overflow-visible
      trigger-border-color="var(--dark-background-error)"
    >
      <span>Second accordion content</span>
    </AvAccordion>
  </AvAccordionsGroup>
</template>