Button component for Vue.js v2.0.1+.
Branch: master
Clone or download
Latest commit 4dc163e Nov 22, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build add npmignore Nov 21, 2016
config init with one button. Nov 21, 2016
dist add main.js to package.json. Nov 21, 2016
src update README.md. Nov 22, 2016
test/unit add test. Nov 22, 2016
.babelrc init with one button. Nov 21, 2016
.codeclimate.yml add codeclimate. Nov 22, 2016
.editorconfig init with one button. Nov 21, 2016
.eslintignore init with one button. Nov 21, 2016
.eslintrc.js init with one button. Nov 21, 2016
.gitignore add main.js to package.json. Nov 21, 2016
.npmignore add npmignore Nov 21, 2016
.travis.yml markup button. Nov 21, 2016
LICENSE add codeclimate. Nov 22, 2016
README.md update README.md. Nov 22, 2016
index.html init with one button. Nov 21, 2016
package.json add codeclimate. Nov 22, 2016
yarn.lock add codeclimate. Nov 22, 2016

README.md

vue-button Build Status Dependency Status MIT License

Button component for Vue.js v2.0.1+.

vue-button

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
}