vue-simple-accordion
A simple, easily configurable accordion for Vue 2.x
Demo
To view a demo online: https://tkhquang.github.io/vue-simple-accordion
Installation
npm install --save vue-simple-accordion
or
yarn add vue-simple-accordion
Import
;; // ... components: VsaList VsaItem VsaHeading VsaContent VsaIcon // ...
or
;; Vue;
Basic Usage
<!-- Here you can use v-for to loop through items --> This is the heading This is the content
With the default options, the html will be generated as:
HTML structure
This is the heading This is the content
Available Options
All user options or component props if not set (or are undefined
) will automatically fallback to these default values:
Default Options
tags: list: "dl" list__item: "div" item__heading: "dt" heading__content: "span" heading__icon: "span" item__content: "dd" roles: presentation: false heading: false region: true transition: "vsa-collapse" initActive: false forceActive: undefined autoCollapse: true {} navigation: true
Component Props
vsa-list
Props | Type | Description |
---|---|---|
tags | Object | Define the html tags for the current list (check the default options for details) |
roles | Object | Define the html roles for the current list (check the default options for details) |
transition | String | Name of the entering/leaving transition effects for items |
initActive | Boolean | Expand the list by default or not |
forceActive | Boolean | When set, this will force the whole list to be expanded or collapsed |
autoCollapse | Boolean | When an item is active (expanded), the other items of the list will automatically collapse |
navigation | Boolean | Enable ↑ ↓ Home End navigation while focusing on a heading |
vsa-item
Props | Type | Description |
---|---|---|
transition | String | Name of the entering/leaving transition effects for the curren item |
initActive | Boolean | Expand the current item by default or not |
forceActive | Boolean | When set, this will force the current item to be expanded or collapsed |
level | String | Number | Identify aria-level while using heading: true |
onHeadingClick | Function | A function will be called automatically when the trigger button is clicked with the arguments contain data of the list and that item |
Priotiry: Item > List > Default
Styling
If you import the css, these CSS variables are available in .vsa-list
:
--);--);--);--);--
In case you don't like the default CSS styling from the library, don't import the css and style your own with the class names as in this structure.