1
1
# 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 )
2
2
3
-
4
3
> Button component for Vue.js v2.0.1+.
5
4
5
+ ![ vue-button] ( http://i.imgur.com/YLEH5Ko.png )
6
+
6
7
## Installation
7
8
8
9
### NPM (Recommended)
@@ -21,8 +22,29 @@ or you can include from [unpkg](https://unpkg.com).
21
22
```
22
23
## Usage
23
24
``` html
25
+ <!-- default button -->
24
26
<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
26
48
</v-button >
27
49
```
28
50
## ES Modules with NPM & vue-loader (Recommended)
@@ -33,3 +55,69 @@ import VueButton from 'vue-button'
33
55
// register component to use
34
56
Vue .component (' v-button' , VueButton)
35
57
```
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
+ ```
0 commit comments