Skip to content

Latest commit

 

History

History
168 lines (140 loc) · 6.01 KB

README.md

File metadata and controls

168 lines (140 loc) · 6.01 KB
Raw

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.4.0

  • Bulma is now a peer dependency - you need to install it yourself (or define your own styles for the necessary css classes)
  • It's now possible to have items open initially

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