- Notifications
You must be signed in to change notification settings - Fork28
Simple accordion menu component for Vue.js
License
zeratulmdq/vue-accordion
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Simple accordion menu component for Vuejs
The API has changed. Checkv0.0.3 documentation if you use the old version.
Install the package:
npm install vue-accordionThen import it in your project
importVuefrom'vue'import{vueAccordion}from'vue-accordion'Vue.component('vue-accordion',vueAccordion)
Just includevue &vue-accordion
<scriptscr="path/to/vue.js"></script><scriptsrc="path/to/dist/vue-accordion.js"></script>
If you just want to play around,unpkg has ready-to-use packages from NPM.
<scriptsrc="https://unpkg.com/vue"></script><scriptsrc="https://unpkg.com/vue-accordion"></script>
Then register the component:
<script>Vue.component('vue-accordion',vueAccordion)varvm=newVue({ ...});</script>
Simply use it like so:
<vue-accordion:items="items":accordionClass="acClass":styles="styles"></vue-accordion>
Once the accordion has been rendered, it'll create the following structure:
<divclass="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-accordionul { ...}....vue-accordionulliah2 { ...}
If you want to modify the styling, take a look at theaccordionClass andstyles props.
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.
Optional. A string bounded to the class attribute of the main div. Defaults tovue-accordion.
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 accordiondiv:{height:'350px'},// this will be bound to the style attribute of all `ul`s inside the accordionul:{color:'#F00'},// this will be bound to the style attribute of all `li`s inside the accordionli:{fontSize:'15px'},// this will be bound to the style attribute of all `a`s inside the accordiona:{padding:'30px'},// this will be bound to the style attribute of all `h2`s inside the accordionh2:{marginTop:'100px'},// this will be bound to the style attribute of all `p`s inside the accordionp:{textTransform:'uppercase'}}
- Tests
- Router-link
Most of the CSS belongs tothis guy
About
Simple accordion menu component for Vue.js