vue-badger-accordion

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="https://raw.githubusercontent.com/vanderb/vue-badger-accordion/HEAD/opened.png" />', closed: '<img
  src="https://raw.githubusercontent.com/vanderb/vue-badger-accordion/HEAD/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"></badger-accordion>

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"></badger-accordion>

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