1.0.6 • Published 4 years ago

@arikardnoir/vue-drip-collapse v1.0.6

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

vue-drip-collapse

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

version npm downloads [Software License](LICENSE)

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

NameTypeDefaultDescription
iconStringfas fa-user-circlechoose the fa fa-icon you want
titleStringDefaultCollapse title
backgroundColorString#d05d1cBackground of collapse
hoverColorString#d05d1cCollapse mouse hover color
iconColorStringfa fa-icon icon color
titleColorStringCollapse title text color

More

We are using Font Awesome as icons [Access](https://fontawesome.com/v4.7.0/icons/)

Examples

Some examples & Looks that how you could use this component

Normal Collapse

picture

Hover Collapse

picture

Color changed on Title and Icons

picture

Example above, about using Collapses on your projects

picture