https://github.com/vanderb/vue-badger-accordion
Badger-Accordion Component for Vue 2.0
https://github.com/vanderb/vue-badger-accordion
Last synced: 8 months ago
JSON representation
Badger-Accordion Component for Vue 2.0
- Host: GitHub
- URL: https://github.com/vanderb/vue-badger-accordion
- Owner: vanderb
- License: mit
- Created: 2018-08-15T13:45:38.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-06-18T15:11:35.000Z (over 4 years ago)
- Last Synced: 2025-03-28T21:39:34.181Z (8 months ago)
- Language: Vue
- Homepage:
- Size: 51.8 KB
- Stars: 26
- Watchers: 2
- Forks: 12
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-badger-accordion - A wrapping Component for Badger Accordion for Vue.js 2.0+ (Components & Libraries / UI Components)
- awesome-vue - vue-badger-accordion - Badger-Accordion Component for Vue 2.0 (UI Components [🔝](#readme))
- awesome-vue - vue-badger-accordion ★5 - A wrapping Component for Badger Accordion for Vue.js 2.0+ (UI Components / Form)
- awesome-vue - vue-badger-accordion - A wrapping Component for Badger Accordion for Vue.js 2.0+ (UI Components / Form)
README
# vue-badger-accordion
Badger-Accordion Component for Vue 2.0
This package is a wrapper for the badger-accordion made by [Stuart Nelson](https://github.com/stuartjnelson)
Badger-Accordion-Repository:
https://github.com/stuartjnelson/badger-accordion
---
## Installation
### Install package
```bash
npm install vue-badger-accordion --save
```
## Setup
```javascript
import {BadgerAccordion, BadgerAccordionItem} from 'vue-badger-accordion'
```
#### Implement globally
```javascript
Vue.component('BadgerAccordion', BadgerAccordion)
Vue.component('BadgerAccordionItem', BadgerAccordionItem)
```
#### Implement locally
```javascript
export default {
components: {
BadgerAccordion,
BadgerAccordionItem
}
}
```
## Example
```html
First Accordion Header
First Accordion Content
Second Accordion Header
Second Accordion Content
```
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".
```html
...
```
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
```html
First Accordion Header
First Accordion Content
```
```javascript
methods: {
...
onOpenItem() {
// Item opened
},
onCloseItem() {
// Item closed
}
}
```
Thanks to [elbojoloco](https://github.com/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*
```html
', closed: ''}">
```
```html
```
*with images*
```html
', closed: '
'}">
```
#### 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:
```js
const MyComponent = {
template: `
`,
props: {
opened: {
type: Boolean,
default: false,
},
},
};
export default {
components: {
BadgerAccodion,
BadgerAccordionItem,
},
data() {
return {
iconComponent: MyComponent,
};
},
}
```
```html
```
#### Disable Icons
```html
```
#### Open single accordion by default
```html
```
## Methods
All Methods of badger-accordion are also available. Just add a ref to you accordion and you can access them.
```html
```
```javascript
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