https://github.com/zeratulmdq/vue-accordion
Simple accordion menu component for Vue.js
https://github.com/zeratulmdq/vue-accordion
Last synced: 9 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 9 years ago)
- Default Branch: master
- Last Pushed: 2018-04-16T06:19:51.000Z (over 7 years ago)
- Last Synced: 2025-03-05T11:48:10.829Z (9 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
- awesome-vue - vue-accordion - Simple accordion menu component for Vue.js ` ๐ 4 years ago` (UI Components [๐](#readme))
- awesome-vue-zh - Vue,ๆ้ฃ็ด - Vue.js็็ฎๅๆ้ฃ็ดๅฏผ่ช่ๅ็ปไปถ. (UI็ปไปถ / ่ๅ)
- awesome-vue - vue-accordion โ 119 - Simple accordion nav menu component for Vue.js. (UI Components / Menu)
- awesome-vue - vue-accordion - Simple accordion nav menu component for Vue.js. (Components & Libraries / UI Components)
- awesome-vue - vue-accordion - Simple accordion nav menu component for Vue.js. (UI Components / Menu)
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/)