vue-accordion

Vue accordion transition.

Installation

npm i vue-simple-accordion

or

yarn add npm i vue-simple-accordion

Then you can install your plugin globally with

...
import Accordion from 'vue-simple-accordion'

Vue.use(Accordion)
...

or locally

...
import Accordion from 'vue-simple-accordion'

export default {
  ...
  components: {
    Accordion
  },
  ...
}
...

Usage

Use Accordion as a component. Pass head and body by slots.

<Accordion :icon-color="#000000">
  <template v-slot:head>
    Accordion Head
  </template>
  <template v-slot:icon>
    <img src="/icon.png" />
  </template>
  <template v-slot:body>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod aliquid. Eveniet nulla necessitatibus, beatae voluptatibus recusandae placeat. Enim autem nemo provident harum. Ea, maiores nobis nesciunt at qui et!
  </template>
</Accordion>

Options

| Parameter | Required | Type | Default | Description | |--------------|----------|-----------------|------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | icon-color | | String | #fff | Hex color for default icon | | disable | | Boolean | false | Disable accordion. Body is always shown. |

To do

Accordion group (close all accordions simultaneously)