Skip to content

Commit 4dc163e

Browse files
committed
update README.md.
1 parent c829806 commit 4dc163e

File tree

2 files changed

+91
-3
lines changed

2 files changed

+91
-3
lines changed

README.md

Lines changed: 90 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
# vue-button [![Build Status](https://travis-ci.org/steven5538/vue-button.svg?branch=master)](https://travis-ci.org/steven5538/vue-button) [![Dependency Status](https://gemnasium.com/badges/github.com/steven5538/vue-button.svg)](https://gemnasium.com/github.com/steven5538/vue-button) ![MIT License](https://img.shields.io/github/license/steven5538/vue-button.svg)
22

3-
43
> Button component for Vue.js v2.0.1+.
54
5+
![vue-button](http://i.imgur.com/YLEH5Ko.png)
6+
67
## Installation
78

89
### NPM (Recommended)
@@ -21,8 +22,29 @@ or you can include from [unpkg](https://unpkg.com).
2122
```
2223
## Usage
2324
```html
25+
<!-- default button -->
2426
<v-button>
25-
Hello
27+
Button
28+
</v-button>
29+
30+
<!-- disabled button -->
31+
<v-button disabled>
32+
Button
33+
</v-button>
34+
35+
<!-- large button -->
36+
<v-button large>
37+
Button
38+
</v-button>
39+
40+
<!-- markup button option: primary, success, warning, error -->
41+
<v-button markup="success">
42+
Button
43+
</v-button>
44+
45+
<!-- button with multiple attribute -->
46+
<v-button markup="warning" large>
47+
Button
2648
</v-button>
2749
```
2850
## ES Modules with NPM & vue-loader (Recommended)
@@ -33,3 +55,69 @@ import VueButton from 'vue-button'
3355
// register component to use
3456
Vue.component('v-button', VueButton)
3557
```
58+
## Parameters
59+
```js
60+
/**
61+
* Equivalent to the `id` attribute on an `<button>`.
62+
* @type {String}
63+
*/
64+
id: {
65+
type: String,
66+
default: null
67+
},
68+
69+
/**
70+
* Attach your custom class on the compontent.
71+
* That means you can change the style if you want.
72+
* @type {String}
73+
*/
74+
customClass: {
75+
type: String,
76+
default: null
77+
},
78+
79+
/**
80+
* Equivalent to the `name` attribute on an `<button>`.
81+
* @type {String}
82+
*/
83+
name: {
84+
type: String,
85+
default: null
86+
},
87+
88+
/**
89+
* Equivalent to the `disabled` attribute on an `<button>`.
90+
* @type {Boolean}
91+
*/
92+
disabled: {
93+
type: Boolean,
94+
default: false
95+
},
96+
97+
/**
98+
* If set enable button font size will be large.
99+
* @type {Boolean}
100+
*/
101+
large: {
102+
type: Boolean,
103+
default: false
104+
},
105+
106+
/**
107+
* Markup button.
108+
* The value can be `default`, `primary`, `success`, `warning`, `error`.
109+
* @type {String}
110+
*/
111+
markup: {
112+
type: String,
113+
default: 'default'
114+
},
115+
116+
/**
117+
* Set the click event on `<button>`.
118+
*/
119+
@click {
120+
type: Object,
121+
defalut: null
122+
}
123+
```

src/dev.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@ Vue.config.devtools = true
99
/* eslint-disable no-new */
1010
new Vue({
1111
el: '#app',
12-
template: '<div><v-button markup="warning">Hello</v-button><br/><br/><v-button>Hello</v-button></div>',
12+
template: '<div><v-button>Hello</v-button></div>',
1313
components: { VueButton }
1414
})

0 commit comments

Comments
 (0)