@dzangolab/vue-accordion NPM

vue-accordion

An accordion component for vue.js.

NPM NPM

Requirements

vue.js

License

This component is released under the MIT license. See LICENSE file for more details.

Installation

Global installation

import Accordion from '@dzangolab/vue-accordion'
import '@dzangolab/vue-accordion/dist/accordion.css' // import stylesheet

Vue.component(Accordion)

In-component installation

import Accordion from '@dzangolab/vue-accordion'
import '@dzangolab/vue-accordion/dist/accordion.css' // import stylesheet

export default {
  components: {
    Accordion
  }
}

Usage

The Accordion is meant to be usable out of the box. Include it in your template and pass it an items prop.

<Accordion
  :items="items"
/>

The items prop must be in the form of :

items: [
  {
    content: 'some content',
    title: 'Item 1'
  },
  {
    content: 'some more content',
    title: 'Item 2'
  },
  {
    content: 'some other content',
    title: 'Item 3'
  }
]

Slots

Name	Description
`title`	Use this slot to customize each item's title
`toggle`	Use this slot to customize each item's toggle button
`content`	Use this slot to customize each item's content

Props

Name	Type	Description	Default
`default-index`	`Number`	The item to be opened by default.	`0`
`duration`	`Number`	The duration of the transition when an item is opened.	`350`
`items`	`Array`	The list of items in the accordion.	`() => []`
`show-toggle`	`Boolean`	Whether the toggle button should be shown in each accordion item.	`true`
`transition`	`String`	The transition to use when opening an accordion item.	`"ease"`