Simple Configurable Accordion Component For Vue

Install & Download:

# Yarn
$ yarn add vue-simple-accordion
# NPM
$ npm i vue-simple-accordion --save

Description:

This is a simple Vue component library that lets you create fully configurable accordion components in the Vue.js app.

Basic Usage:

1. Import components into your Vue.js app.

// import components
import {
  VsaList,
  VsaItem,
  VsaHeading,
  VsaContent,
  VsaIcon
} from 'vue-simple-accordion';
// import stylesheet
import 'vue-simple-accordion/dist/vue-simple-accordion.css';
// register components
export default {
  components: {
    VsaList,
    VsaItem,
    VsaHeading,
    VsaContent,
    VsaIcon
  }
}

2. Create a basic accordion component as follows:

<vsa-list>
  <vsa-item>
    <vsa-heading>
      Accordion Heading
    </vsa-heading>
    <vsa-content>
      Accordiong Panel
    </vsa-content>
  </vsa-item>
</vsa-list>

3. Available props to config the accordion component.

tags: {
  type: Object,
  required: false,
  default: {
    list: "dl",
    list__item: "div",
    item__heading: "dt",
    heading__content: "span",
    heading__icon: "span",
    item__content: "dd"
  }
},
transition: {
  type: String,
  required: false,
  default: undefined // vsa-collapse. 
},
initActive: {
  type: Boolean,
  required: false,
  default: undefined
},
forceActive: {
  type: Boolean,
  required: false,
  default: undefined
},
autoCollapse: {
  type: Boolean,
  required: false,
  default: undefined
},
roles: {
  type: Object,
  required: false,
  default: {
    presentation: false,
    heading: false,
    region: true
  }
},
navigation: {
  type: Boolean,
  required: false,
  default: undefined
}