vue-button
Button component for Vue.js v2.0.1+.
Installation
NPM (Recommended)
$ npm install vue-button
manual
Download dist/vue-button.js
and include it in your HTML file:
<script src="path/to/vue-button/dist/vue-button.js"></script>
or you can include from unpkg.
<!--use the lastest release--> <script src="https://unpkg.com/vue-button@lastest"></script>
Usage
<!-- default button --> <v-button> Button </v-button> <!-- disabled button --> <v-button disabled> Button </v-button> <!-- large button --> <v-button large> Button </v-button> <!-- markup button option: primary, success, warning, error --> <v-button markup="success"> Button </v-button> <!-- button with multiple attribute --> <v-button markup="warning" large> Button </v-button>
ES Modules with NPM & vue-loader (Recommended)
import Vue from 'Vue' import VueButton from 'vue-button' // register component to use Vue.component('v-button', VueButton)
Parameters
/** * Equivalent to the `id` attribute on an `<button>`. * @type {String} */ id: { type: String, default: null }, /** * Attach your custom class on the compontent. * That means you can change the style if you want. * @type {String} */ customClass: { type: String, default: null }, /** * Equivalent to the `name` attribute on an `<button>`. * @type {String} */ name: { type: String, default: null }, /** * Equivalent to the `disabled` attribute on an `<button>`. * @type {Boolean} */ disabled: { type: Boolean, default: false }, /** * If set enable button font size will be large. * @type {Boolean} */ large: { type: Boolean, default: false }, /** * Markup button. * The value can be `default`, `primary`, `success`, `warning`, `error`. * @type {String} */ markup: { type: String, default: 'default' }, /** * Set the click event on `<button>`. */ @click { type: Object, defalut: null }