Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/zeratulmdq/vue-accordion

Simple accordion menu component for Vue.js
https://github.com/zeratulmdq/vue-accordion

Last synced: about 2 months ago
JSON representation

Simple accordion menu component for Vue.js

Lists

README 

        
# vue-accordion

Simple accordion menu component for Vuejs



[Check it out live!](http://zeratulmdq.github.io/vue-accordion/)



## Note



The API has changed. Check [v0.0.3 documentation](/docs/0.0.3.md) if you use the old version.



## Install



#### NPM / Yarn



Install the package:



```

npm install vue-accordion

```



Then import it in your project



```js

import Vue from 'vue'

import {vueAccordion} from 'vue-accordion'



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

```



#### Browser global



Just include `vue` & `vue-accordion`



```html



```



If you just want to play around, [unpkg](https://unpkg.com/#/) has ready-to-use packages from NPM.



```html



```



Then register the component:



```html



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

  

  var vm = new Vue({

    ...

  });



```



## Usage



Simply use it like so:



```html



```



## Structure



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



````html



  



````



All CSS is based uppon this structure. 



```css

.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:



```js

{

  // 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](http://michael-ferry.com/)