Button.mood

The best Vue.js dropdown.

Description

Button.mood is an intelligent button component designed with Vue.js. It can be integrated into any Vue.js project and with several options and functionalities.

Documentation

Documentation

Installing

# npm
npm i --save button.mood

# yarn
yarn add button.mood

Usage

Button.mood is very simple to use.

Overall use

import Vue from 'vue';
import MdButton, { ButtonOptions } from 'button.mood';
import 'button.mood/dist/button.css';

const btnOptions: ButtonOptions = {
  color: '#fcdc2a',
  borderWidth: 2,
};

Vue.use(MdButton, btnOptions);

Single file

<script lang="js">
import { MdButton } from "button.mood";
import 'button.mood/dist/button.css';

export default {
  components: {
    MdButton
  }
}
</script>

In your vue.js file

After that you can use the component in your code as follows.

<template>
  <div id="app">
    <md-button color="yellow" rounded="pill">
      my button
    </md-button>
  </div>
</template>

Props

tag

• type: string
• default: 'button'

This property takes as value any valid html tag or Vue.js component such as router-link.

type

• type: string
• value: 'default' | 'outline' | 'link' | 'relief'
• default: 'default'

color

• type: any

We use the color library to manage colors. Set the values for individual channels with alpha, red, green, blue, hue, saturationl (hsl), saturationv (hsv), lightness, whiteness, blackness, cyan, magenta, yellow, black.

size

• type: string
• value: 'default' | 'sm' | 'md' | 'lg' | 'xl'
• default: 'default'

rounded

• type: string
• value: 'default' | 'scare' | 'sm' | 'pill' | 'circle'
• default: 'default'

on-hover

• type: any
• value: 'elevate' | 'scale' | 'shadow' | 'shadow-sm' | 'shadow-null' | 'shadow-lg' | null

shadow

• type: string | boolean
• value: 'true' | 'sm' | 'lg' | null

transparent

• type: number
• value: 0 <= value >= 1

block

• type: boolean
• value: true' | false'
• default: false

If the value is true, the component will be of type block

no-border

• type: boolean
• value: true' | false'
• default: false

disabled

• type: boolean
• value: true' | false'
• default: false

router props

If you want the component to behave like the native component of vue-router, router-link, set the property tag to 'router-link'.

You can set all the properties of router-link provided that these are preceded by the word 'router -'. For example instead of putting to you put router-to, instead of active-class, put router-active-class, instead of tag, router-tag. You can see all the properties of 'router-link' here.

Author

@domutala

License

MIT