Skip to content

Commit d5ab004

Browse files
euvleuvl
committed
Merge branch 'master' of github.com:euvl/vue-js-toggle-button
2 parents 3a6e7e6 + 1fc14c5 commit d5ab004

File tree

1 file changed

+56
-49
lines changed

1 file changed

+56
-49
lines changed

‎README.md‎

Lines changed: 56 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,53 @@
1-
[![npm version](https://badge.fury.io/js/vue-js-toggle-button.svg)](https://badge.fury.io/js/vue-js-toggle-button)
2-
[![npm](https://img.shields.io/npm/dm/vue-js-toggle-button.svg)](https://www.npmjs.com/package/vue-js-toggle-button)
3-
<br/>
4-
<a align="right" href="https://www.buymeacoffee.com/yev" target="_blank">
5-
<img width="200" alt="screen shot 2018-03-01 at 10 33 39" src="https://user-images.githubusercontent.com/1577802/36840220-21beb89c-1d3c-11e8-98a4-45fc334842cf.png">
6-
</a>
7-
8-
### Vue.js 2 toggle / switch button - simple, pretty, customizable.
9-
10-
![Imgur](http://i.imgur.com/a2Hf7pm.png)
11-
12-
Feel free to ask questions or propose features in the "Issues" section
1+
<span>
2+
<img src="https://badge.fury.io/js/vue-js-toggle-button.svg">
3+
</span> <span>
4+
<img src="https://img.shields.io/npm/dm/vue-js-toggle-button.svg">
5+
</span>
6+
7+
# Vue.js toggle/switch button.
8+
9+
<p align="right">
10+
<a href="https://www.buymeacoffee.com/yev" target="_blank">
11+
<img
12+
width="140"
13+
alt="Get a coffee"
14+
src="https://user-images.githubusercontent.com/1577802/36840220-21beb89c-1d3c-11e8-98a4-45fc334842cf.png">
15+
</a>
16+
</p>
17+
18+
<p align="center">
19+
<img src="http://i.imgur.com/a2Hf7pm.png">
20+
</p>
1321

1422
[Live demo here](http://vue-js-toggle-button.yev.io/)
1523

16-
Install:
24+
### Install
25+
1726
```bash
1827
npm install vue-js-toggle-button --save
1928
```
20-
If using `vue-cli`, add the SASS loader:
21-
```bash
22-
npm install sass-loader node-sass --save-dev
23-
```
2429

25-
Import Plugin:
30+
### Import
31+
32+
Import plugin:
33+
2634
```javascript
2735
import ToggleButton from 'vue-js-toggle-button'
36+
2837
Vue.use(ToggleButton)
2938
```
30-
Use:
39+
**OR**
40+
41+
Import component:
42+
43+
```javascript
44+
import { ToggleButton } from 'vue-js-toggle-button'
45+
46+
Vue.component('ToggleButton', ToggleButton)
47+
```
48+
49+
### Use
50+
3151
```xml
3252
<toggle-button @change="onChangeEventHandler"/>
3353

@@ -42,43 +62,40 @@ Use:
4262
:labels="{checked: 'Foo', unchecked: 'Bar'}"/>
4363
```
4464

45-
If you prefer not to use the plugin you can also import the component directly:
46-
```javascript
47-
import ToggleButton from 'vue-js-toggle-button/src/Button.vue''
48-
```
49-
5065
### Properties
5166

52-
| Name | Type | Default | Description |
53-
| --- | --- | --- | --- |
54-
| value | Boolean | false | Initial state of the toggle button |
55-
| sync | Boolean | false | If set to `true`, will be watching changes in `value` property and overwrite the current state of the button whenever `value` prop changes |
56-
| speed | Number | 300 | Transition time for the animation |
57-
| disabled | Boolean | false | Button does not react on mouse events |
58-
| color | [String, Object] | `#75C791` | If `String` - color of the button when checked <br>If `Object` - colors for the button when checked/unchecked or disabled<br>Example: `{checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}` |
59-
| cssColors | Boolean | false | If `true` - deactivates the setting of colors through inline styles in favor of using CSS styling |
60-
| labels | [Boolean, Object] | false | If `Boolean` - shows/hides default labels ("on" and "off") <br>If `Object` - sets custom labels for both states. <br>Example: `{checked: 'Foo', unchecked: 'Bar'}` |
61-
| switchColor | [String, Object] | `#BFCBD9` | If `String` - color or background property of the switch when checked <br>If `Object` - colors or background property for the switch when checked/uncheked <br>Example: `{checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}` |
62-
| width | Number | 50 | Width of the button, default is 50 |
63-
| height | Number | 22 | Height of the button, default is 22 |
64-
| name | String | undefined | Name to attach to the generated input field |
65-
66-
`labels` object accepts HTML text (for example, you can use FontAwesome for checked/unchecked states).
67+
| Name | Type | Default | Description |
68+
| --- | --- | --- | --- |
69+
| value | Boolean | false | Initial state of the toggle button |
70+
| sync | Boolean | false | If set to `true`, will be watching changes in `value` property and overwrite the current state of the button whenever `value` prop changes |
71+
| speed | Number | 300 | Transition time for the animation |
72+
| disabled | Boolean | false | Button does not react on mouse events |
73+
| color | [String, Object] | `#75C791` | If `String` - color of the button when checked <br>If `Object` - colors for the button when checked/unchecked or disabled<br>Example: `{checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}` |
74+
| cssColors | Boolean | false | If `true` - deactivates the setting of colors through inline styles in favor of using CSS styling |
75+
| labels | [Boolean, Object] | false | If `Boolean` - shows/hides default labels ("on" and "off") <br>If `Object` - sets custom labels for both states. <br>Example: `{checked: 'Foo', unchecked: 'Bar'}` |
76+
| switchColor | [String, Object] | `#BFCBD9` | If `String` - color or background property of the switch when checked <br>If `Object` - colors or background property for the switch when checked/uncheked <br>Example: `{checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}` |
77+
| width | Number | 50 | Width of the button |
78+
| height | Number | 22 | Height of the button |
79+
| name | String | undefined | Name to attach to the generated input field |
80+
| fontSize | Number | undefined | Font size |
6781

6882
### Events
6983

7084
| Name | Description |
7185
| --- | --- |
7286
| change | Triggered whenever state of the component changes. <br>Contains: <br>`value` - state of the object <br>`srcEvent` - source click event |
87+
| input | Input event for v-model |
7388

7489
### SSR
7590

7691
Include plugin in your `nuxt.config.js` file:
92+
7793
```javascript
7894
module.exports = {
7995
plugins: ['~plugins/vue-js-toggle-button']
8096
}
8197
```
98+
8299
And your `plugins/vue-js-toggle-button.js` will look like:
83100

84101
```javascript
@@ -95,13 +112,3 @@ Vue.use(Button)
95112
* Safari: 10+
96113
* IE: 11+
97114

98-
### Font size
99-
To change font size please use basic css:
100-
```css
101-
.vue-js-switch#changed-font {
102-
font-size: 16px;
103-
}
104-
```
105-
```vue
106-
<toggle-button id="changed-font"/>
107-
```

0 commit comments

Comments
 (0)