vba

vue-badger-accordion

Badger-Accordion Component for Vue 2.0

Showing:

Popularity

Downloads/wk

282

GitHub Stars

27

Maintenance

Last Commit

7mos ago

Contributors

9

Package

Dependencies

3

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial