Bringing an accordion menu component in Vue.js projects

vue-accordion

Want to create a neat row of images that expands and contracts when hovering and leaving, with nice transtitions? Well you don't have to because in Vue projects a good solution is the vue-accordion. A simple, horizontal, expanding accordion menu component for Vue.js.

Click here to see it in action.

Please note that the API has changed. Check v0.0.3 documentation if you use the old version.

Example

Install in your Vue.js project via NPM / Yarn

yarn add vue-accordion

Then import it in your project like this to make it available globally

import {vueAccordion} from 'vue-accordion'

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

You can use it simply by pasting the component tag and bind the props to your data

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

To make things work use an array of objects for items with the following structure

items: [
    {
        title: 'Vue Particles',
        text: 'Vuejs Feed',
        //url you would like to point when clicked
        url: '#',
        image: '/images/one.jpg'
    },
    ...
],

If you would like to customize the looks of it use a styles object containing specific CSS properties to be bound to the elements created inside the accordion

styles: {
    // 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: '22px'
    },
    // 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'
    }
}

Also available: accordionClass as a string bounded to the class attribute of the main div.

Playing with the accordion

To see more the rendered structure of the accordion head to the GitHub repo, and maybe give it a star!