Accordion

The EAccordion component is a useful tool for managing and displaying large amounts of data on a webpage. Demo Here

It enables users to hide and display sections of content at a time. Nevertheless, when a multiple prop is used, multiple items can expand until explicitly closed.

Usage

The EAccordion and EAccordionGroup components are used together as below:

<template>
  <EAccordionGroup v-model="activeAccordion">
    <EAccordion>
      <template #title>Title</template>
      <template #content>This an Accordion item</template>
    </EAccordion>
  </EAccordionGroup>
</template>

<script setup>
  const activeAccordion = ref([]);
</script>

The type of v-model is Array and it needs to be assigned like this: v-model="your_active_item_index_inside_Array_variable".

Props

For EAccordionGroup component, the following props are available:

Prop	Type	Default	Note
modelValue	[Number, Array]	false	Accordion's active prop
multiple	Boolean	false	The multiple property allows more than one item to expand at the same time.
disabled	Boolean	false	Disables the the accordion elements.
variant	String	"fill"	The EAccordion elements can be represented in two ways: fill and outline.
color	String	"dark_theme-100"	The given color is applied to the element - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
square	Boolean	false	Removes rounded corners of the element.

For EAccordion component, the following props are available:

Prop	Type	Default	Note
variant	String	"fill"	The EAccordion elements can be represented in two ways: fill and outline.
prependIcon	Object	{}	Inserts a custom EIcon element to the accordion item(s) that is located before the title. here.
appendIcon	Object	{}	Inserts a custom EIcon element to the accordion item(s) that is located after the title. here.
disabled	Boolean	false	Disables the EAccordion element.
color	String	"dark_theme-100"	The given color is applied to the element - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
square	Boolean	false	Removes rounded corners of the element.
disabled	Boolean	false	Disables the the accordion elements.

Note

As you can see, the EAccordionGroup and EAccordion components share a few properties (disabled, color, etc.) which can be used in two ways:

approach 1

<template>
  <EAccordionGroup color="danger">
    <EAccordion>
      <!-- color: danger -->
      <template #title>Title</template>
      <template #content>Content 1</template>
    </EAccordion>
    <EAccordion>
      <!-- color: danger -->
      <template #title>Title</template>
      <template #content>Content 2</template>
    </EAccordion>
  </EAccordionGroup>
</template>

approach 2

<template>
  <EAccordionGroup color="danger">
    <EAccordion color="success">
      <!-- color: success -->
      <template #title>Title</template>
      <template #content>Content 1</template>
    </EAccordion>
    <EAccordion>
      <!-- color: danger -->
      <template #title>Title</template>
      <template #content>Content 2</template>
    </EAccordion>
  </EAccordionGroup>
</template>

Emits

The EAccordionGroup component contains following emits.

Emit	Description
update:modelValue	Emitted when the local ref's value is mutated.

The EAccordion component contains following emits.

Emit	Description
update:modelValue	Emitted when the local ref's value is mutated.

Slots

The EAccordion component provides the following slots that enable you to customize the content.

Slot	Description
content	Slot for the component’s text content.
title	Slot for the component’s title content.