Animated Accordion Component - vue3-rich-accordion

Install & Download:

# Yarn
$ yarn add vue3-rich-accordion
# NPM
$ npm i vue3-rich-accordion

Description:

An animated, customizable, SSR-friendly accordion component for Vue 3.

How to use it:

1. Import and register the vue3-rich-accordion.

import { createApp } from "vue";
import App from "./App.vue";
import { useAccordion } from "vue3-rich-accordion";
import "vue3-rich-accordion/accordion-library-styles.css";
const app = createApp(App);
app.use(useAccordion);
app.mount("#app");

// OR
import { AccordionList, AccordionItem } from "vue3-rich-accordion";

2. Add the accordion component to the template.

<AccordionList>
  <AccordionItem>
    <template #summary>Item summary</template>
    <template #icon>Icon Here</template>
    <h3>Main content</h3>
  </AccordionItem>
  ... more accordion items here ...
</AccordionList>

3. Available props.

// Accordion list
interface IAccordionListProps {
  openMultipleItems ? : boolean; 
  state ? : Record<string, boolean>;
  setClosePropertyTime ? : number; 
}
// Accordion item
interface IAccordionItemProps {
  id?: string; 
  defaultOpened?: boolean;  
  disabled?: boolean 
}