@arikardnoir/vue-drip-collapse

vue-drip-collapse

Vue Drip Collapse is solution that could help you about use collapse with VueJS 🎨

A Vue.js plugin to easily integrate button in your projects.

Vue Drip Collapse is a Collapse that give you lot of alternatives to work with.

Instalation

Install the package from npm by running:

# install dependencies
npm i @arikardnoir/vue-drip-collapse

# install others dependencies to complate the package
npm install -D sass-loader node-sass

Usage

Import, register and place the component in your Vue app.

<template>   

  <VueDripCollapse icon="nextbss-bar-chart" 
            title="Users" 
            backgroundColor="#2e3553" 
            hoverColor="#d05d1c"
            iconColor="#d05d1c"
            titleColor="#fff"
            >
        <router-link :to="{ name: 'RegistUser' }" tag="li">
            <a class="col-intern" href>
                <i class="fas fa-user-plus"></i>
                <span>Create</span>
            </a>
            </router-link>
            <router-link :to="{ name: 'ListUser' }" tag="li">
            <a class="col-intern" href>
                <i class="fas fa-list"></i>
                <span>List</span>
            </a>
        </router-link>
  </VueDripCollapse>
  <VueDripCollapse icon="nextbss-bar-chart" 
            title="Events" 
            backgroundColor="#2e3553" 
            hoverColor="#d05d1c" 
            iconColor="#d05d1c" 
            titleColor="#fff"
            >
        <router-link :to="{ name: 'ListEvent' }" tag="li">
            <a class="col-intern" href>
                <i class="fas fa-list"></i>
                <span>List</span>
            </a>
        </router-link>
  </VueDripCollapse>
</template>

import VueDripCollapse from '@arikardnoir/vue-drip-collapse'

export default {
  components: {
    VueDripCollapse,
  }
}

Props

Components Property that make him cool

Name	Type	Default	Description
icon	String	fas fa-user-circle	choose the fa fa-icon you want
title	String	Default	Collapse title
backgroundColor	String	#d05d1c	Background of collapse
hoverColor	String	#d05d1c	Collapse mouse hover color
iconColor	String		fa fa-icon icon color
titleColor	String		Collapse title text color

More

We are using Font Awesome as icons Access

Examples

Some examples & Looks that how you could use this component

Normal Collapse

Hover Collapse

Color changed on Title and Icons

Example above, about using Collapses on your projects