vue-bulma-accordion
Version:
A simple, easily configurable accordion or collapsible for Vue, styled with Bulma
169 lines (140 loc) • 6.03 kB
Markdown
# vue-bulma-accordion
[  ](https://www.npmjs.com/package/vue-bulma-accordion)
[](https://vuejs.org/)
A simple, easily configurable accordion or collapsible for Vue, styled with Bulma.
Full docs [here](https://lunrtick.github.io/vue-bulma-accordion/)
## New in 0.5
- SSR Support!
- Smaller - only about 2.9kb gzipped
## Table of contents
- [Installation](#installation)
- [Usage](#usage)
- [Example](#example)
# Installation
```bash
$ npm install --save vue-bulma-accordion
$ yarn add vue-bulma-accordion
# Bulma is a peer dependency, you have to install it manually
$ yarn add bulma
$ npm install --save bulma
```
## Import
Single File Component:
```javascript
import { BulmaAccordion, BulmaAccordionItem } from 'vue-bulma-accordion'
export default {
name: 'cool-component',
data() {
return {}
},
components: {
BulmaAccordion,
BulmaAccordionItem
}
}
```
# Usage
Put a `<BulmaAccordion>` item on your page. There are a few options for the accordion, though they have sensible defaults if you dont want to change anything:
1. dropdown
- Boolean
- If `true`, allows any number of items to be expanded simultaneously, rather than only 1 at a time
2. initialOpenItem
- Number | String
- The index of the item you want to be open when the component is done rendering
- N.B. Indexing is 1 based - the first item is item 1
- This takes precedence over initialOpenItems if both are set
3. initialOpenItems
- Number[]
- The indexes of the item you want to be open when the component is done rendering
- N.B. Indexing is 1 based - the first item is item 1
4. icon
- String
- The icon on the right hand side of the title bar
- There are 3 options
- `'caret'`
- `'plus-minus'`
- `'custom'` - with this selected, you can provide your own icon in a slot, inside each accordion item. Either provide one icon in the `'icon'` slot, or a separate icon for when that accordion item is open or closed, in the `'icon-open'` and `'icon-closed'` slots
5. caretAnimation
- Object
- duration: String - CSS valid duration, like `'450ms'`
- timerFunc: String - CSS valid timer function, like `'ease'`
- none: Boolean - set to false to disable animation
- If you select the 'caret' icon, this tunes the animation
- 'none' - the default. The arrow simply switches instantly
- 'spin' - the arrow rotates and expands slightly
6. slide
- Object
- duration: String - CSS valid duration, like `'700ms'`
- timerFunc: String - CSS valid timer function, like `'ease'`
- Allows configuration of the slide animation for each accordion item
Fill the `<BulmaAccordion>` with as many `<BulmaAccordionItem>` components as you need. Each of the `<BulmaAccordionItem>` components has 3 slots, if you're not using a custom icon:
1. `title` - I've found `<h4 class="title is-4 has-text-weight-normal" slot="title">The Title</h4>` to look quite nice
2. `content`
3. `footer`
There are a further 3 slots for custom icons:
1. `icon` - when you just want 1 icon, DON'T USE WITH `icon-open` and `icon-closed`
2. `icon-open` - the icon shown when the `<BulmaAccordionItem>` is open
3. `icon-closed` - the icon shown when the `<BulmaAccordionItem>` is closed
# Examples
## Using built in icons
```vue
<BulmaAccordion
dropdown
:icon="'caret'"
:caretAnimation="{
duration: '.6s',
timerFunc: 'ease-in-out'
}"
:slide="{
duration: '.9s',
timerFunc: 'ease'
}"
>
<!-- The wrapper component for all the items -->
<BulmaAccordionItem>
<h4 slot="title">Just a title</h4>
</BulmaAccordionItem>
<!-- add as many of these items as you need - fill them with content via the slots -->
<BulmaAccordionItem>
<h4 slot="title">A title with content</h4>
<p slot="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus eos
illo expedita asperiores rem iure aliquid dolore, pariatur
dignissimos, minima inventore? Minima voluptatum nulla, error omnis
laboriosam voluptatibus rem aperiam.
</p>
</BulmaAccordionItem>
<BulmaAccordionItem>
<h4 slot="title">All of it</h4>
<p slot="content">boo</p>
<button class="button is-primary" slot="footer">Click Me!</button>
</BulmaAccordionItem>
</BulmaAccordion>
```
## Using custom icons
The icons used here are from https://material.io/icons/
```vue
<BulmaAccordion :dropdown="false" :icon="'custom'">
<!-- The wrapper component for all the items -->
<BulmaAccordionItem>
<p class="title is-4 has-text-weight-normal" slot="title">Title</p>
<i slot="icon" class="material-icons">more_vert</i>
<div class="high" slot="content"><p>This is a div with content</p></div>
<button class="button is-primary" slot="footer">Click Me!</button>
</BulmaAccordionItem>
<!-- add as many of these items as you need - fill them with content via the slots -->
<BulmaAccordionItem>
<h4 slot="title">A title with content</h4>
<i slot="icon-closed" class="material-icons">flight_takeoff</i>
<i slot="icon-open" class="material-icons">flight_land</i>
<p slot="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus eos
illo expedita asperiores rem iure aliquid dolore, pariatur
dignissimos, minima inventore? Minima voluptatum nulla, error omnis
laboriosam voluptatibus rem aperiam.
</p>
</BulmaAccordionItem>
</BulmaAccordion>
```
## License
[MIT](http://opensource.org/licenses/MIT)