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
- Host: GitHub
- URL: https://github.com/zeratulmdq/vue-accordion
- Owner: zeratulmdq
- License: mit
- Created: 2016-04-12T15:37:30.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-16T06:19:51.000Z (over 6 years ago)
- Last Synced: 2024-07-12T20:22:19.007Z (2 months ago)
- Language: Vue
- Size: 86.9 KB
- Stars: 171
- Watchers: 7
- Forks: 28
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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/)