collapsy

collapsy

Collapsy - Fresh Accordion Component for Vue 2.0

This package is inspired by badger-accordion and my vue-implementation vue-badger-accordion.

Installation

Install package

npm install collapsy --save

yarn add collapsy

Setup

import Collapsy from 'collapsy'
Vue.use(Collapsy);

Example

<collapsy>
    <collapsy-item>
        <collapsy-header>First Accordion Header</collapsy-header>    
        <collapsy-content>First Accordion Content</template>  
    </collapsy-item>

    <collapsy-item>
        <collapsy-header>Second Accordion Header</collapsy-header>    
        <collapsy-content>Second Accordion Content</collapsy-content>  
    </collapsy-item>
</collapsy>

Custom state-indicators/-icons

By default the Accordion-Header shows an state-indicator (+/-). You can easily disable or replace them with images or your favorite icon-font by set the icon-property.

Set Icons

with font-library e.g. font-awesome

<collapsy :icons="{opened: '<i class="fas fa-chevron-down"></i>', closed: '<i class="fas fa-chevron-up"></i>'}">

with images

<collapsy :icons="{opened: '<img src="opened.png" alt="opened">', closed: '<img src="closed.png" alt="closed">'}">

Disable Icons

<collapsy :icons="false">

Notes

This package is work in progress. Please not there may be several bugs.