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