Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/Lunrtick/vue-bulma-accordion

A simple, easily configurable accordion or collapsible for Vue, styled with Bulma
https://github.com/Lunrtick/vue-bulma-accordion

Last synced: about 2 months ago
JSON representation

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

Lists

README 

        
# vue-bulma-accordion



[![npm](https://img.shields.io/npm/v/vue-bulma-accordion.svg) ![npm](https://img.shields.io/npm/dm/vue-bulma-accordion.svg) ![npm](https://img.shields.io/npm/dt/vue-bulma-accordion.svg)](https://www.npmjs.com/package/vue-bulma-accordion)

[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](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!



## 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 `` 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 `` with as many `` components as you need. Each of the `` components has 3 slots, if you're not using a custom icon:



1.  `title` - I've found `
The Title
` 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 `` is open

3.  `icon-closed` - the icon shown when the `` is closed



# Examples



## Using built in icons



```vue



    

    

        
Just a title


    

    

    

        
A title with 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.

        


    

    

        
All of it


        
boo


        Click Me!

    



```



## Using custom icons



The icons used here are from https://material.io/icons/



```vue



    

    

        
Title


        more_vert

        
This is a div with content


        Click Me!

    

    

    

        
A title with content


        flight_takeoff

        flight_land

        


            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.

        


    



```



## License



[MIT](http://opensource.org/licenses/MIT)