vue-badger-accordion

Badger-Accordion Component for Vue 2.0

This package is a wrapper for the badger-accordion made by Stuart Nelson

Badger-Accordion-Repository:

https://github.com/stuartjnelson/badger-accordion

---

Installation

Install package

npm install vue-badger-accordion --save

Setup

import {BadgerAccordion, BadgerAccordionItem} from 'vue-badger-accordion'

Implement globally

Vue.component('BadgerAccordion', BadgerAccordion)
Vue.component('BadgerAccordionItem', BadgerAccordionItem)

Implement locally

export default {
    components: {
        BadgerAccordion,
        BadgerAccordionItem
    }
}

Example

<badger-accordion>
    <badger-accordion-item>
        <template slot="header">First Accordion Header</template>    
        <template slot="content">First Accordion Content</template>  
    </badger-accordion-item>

    <badger-accordion-item>
        <template slot="header">Second Accordion Header</template>    
        <template slot="content">Second Accordion Content</template>  
    </badger-accordion-item>
</badger-accordion>

Note: You can replace the template-tag with all regular html-tags, just remember to add the slot-parameter.

Options

Options can be implemented by component property "option".

<badger-accordion :options="{...}">
    ...
</badger-accordion>

A list of available options could be found in the badger-accordion repository

https://github.com/stuartjnelson/badger-accordion#options

Events

You can handle open/close-Events for each AccordionItem

<badger-accordion>
    <badger-accordion-item @open="onOpenItem" @close="onCloseItem">
        <template slot="header">First Accordion Header</template>    
        <template slot="content">First Accordion Content</template>  
    </badger-accordion-item>
</badger-accordion>

methods: {
    ...
    onOpenItem() {
        // Item opened
    },
    onCloseItem() {
        // Item closed
    }
}

Thanks to elbojoloco for that change.

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 - Basic

with font-library e.g. font-awesome

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

with images

<badger-accordion :icons="{opened: '<img src="opened.png">', closed: '<img src="closed.png">'}">

Set Icons - Advanced

Sometimes you may want greater control of your the state icon renders. In this case you can pass a vue component in directly to the badger accordion:

const MyComponent = {
    template: `
        <span class="my-icon">{{ opened ? 'I am open' : ' I am closed' }}</span>
    `,
    props: {
        opened: {
            type: Boolean,
            default: false,
        },
    },
};

export default {
    components: {
        BadgerAccodion,
        BadgerAccordionItem,
    },
    data() {
        return {
            iconComponent: MyComponent,
        };
    },
}

<badger-accordion iconComponent="iconComponent"></badger-accordion>

Disable Icons

<badger-accordion :icons="false">

Open single accordion by default

<badger-accordion :default-open-header-index="1">

Methods

All Methods of badger-accordion are also available. Just add a ref to you accordion and you can access them.

<badger-accordion ref="myAccordion">

this.$refs.myAccordion.open(0);

A list of available methods could be found in the badger-accordion repository

https://github.com/stuartjnelson/badger-accordion#methods