Awesome

vue-accordion

Simple accordion menu component for Vuejs

Check it out live!

Note

The API has changed. Check v0.0.3 documentation if you use the old version.

Install

NPM / Yarn

Install the package:

npm install vue-accordion

Then import it in your project

import Vue from 'vue'
import {vueAccordion} from 'vue-accordion'

Vue.component('vue-accordion', vueAccordion)

Browser global

Just include vue & vue-accordion

<script scr="path/to/vue.js"></script>
<script src="path/to/dist/vue-accordion.js"></script>

If you just want to play around, unpkg has ready-to-use packages from NPM.

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-accordion"></script>

Then register the component:

<script>
  Vue.component('vue-accordion', vueAccordion)
  
  var vm = new Vue({
    ...
  });
</script>

Usage

Simply use it like so:

<vue-accordion :items="items" :accordionClass="acClass" :styles="styles"></vue-accordion>

Structure

Once the accordion has been rendered, it'll create the following structure:

<div class="vue-accordion">
  <ul>
    <!-- First menu item-->
    <li>
      <a>
        <h2>...</h2>
        <p>...</p>
      </a>
    </li>
    <!-- Second menu item-->
    <li>
      <a>
        <h2>...</h2>
        <p>...</p>
      </a>
    </li>
    ...
  </ul>
</div>

All CSS is based uppon this structure.

.vue-accordion {
  ...
}

.vue-accordion ul {
  ...
}

...

.vue-accordion ul li a h2 {
  ...
}

If you want to modify the styling, take a look at the accordionClass and styles props.

Options

items

Mandatory. An array of objects to create the panels inside the accordion. Each object must have this structure:

{
  title: 'First',
  text: 'text',
  url: '#',
  image: '/images/one.jpg'
}

Take into consideration the width of the accordion and the images you use. If the image is shorter, you'll see a an awful grey background.

accordionClass

Optional. A string bounded to the class attribute of the main div. Defaults to vue-accordion.

styles

Optional. An object whose keys are other objects containing specific CSS properties to be bound to the elements created inside the accordion:

{
  // this will be bound to the style attribute of all `div`s inside the accordion
  div: {
    height: '350px'
  },
  // this will be bound to the style attribute of all `ul`s inside the accordion
  ul: {
    color: '#F00'
  },
  // this will be bound to the style attribute of all `li`s inside the accordion
  li: {
    fontSize: '15px'
  },
  // this will be bound to the style attribute of all `a`s inside the accordion
  a: {
    padding: '30px'
  },
  // this will be bound to the style attribute of all `h2`s inside the accordion
  h2: {
    marginTop: '100px'
  },
  // this will be bound to the style attribute of all `p`s inside the accordion
  p: {
    textTransform: 'uppercase'
  }
}

TODO

• Tests
• Router-link

CREDITS

Most of the CSS belongs to this guy