# vue-bulma-accordion

npm npm npm vue2

A simple, easily configurable accordion or collapsible for Vue, styled with Bulma.

Full docs here

# New in 0.5

  • SSR Support!
  • Smaller - only about 2.9kb gzipped

# Table of contents

# Installation

$ 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:

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

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

<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