Feel free to ask questions or propose features in the "Issues" section
Install:
npm install vue-js-toggle-button --save
Import:
import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton)
Use:
<toggle-button @change="onChangeEventHandler"/>
<toggle-button v-model="myDataVariable"/>
<toggle-button :value="false"
color="#82C7EB"
:sync="true"
:labels="true"/>
<toggle-button :value="true"
:labels="{checked: 'Foo', unchecked: 'Bar'}"/>
Name | Type | Default | Description |
---|---|---|---|
value | Boolean | false | Initial state of the toggle button |
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 |
speed | Number | 300 | Transition time for the animation |
disabled | Boolean | false | Button does not react on mouse events |
color | [String, Object] | #75C791 |
if String - color of the button when checked If Object - colors for the button when checked/uncheked Example: {checked: '#00FF00', unchecked: '#FF0000'} |
labels | [Boolean, Object] | false | If Boolean - shows/hides default labels ("on" and "off") If Object - sets custom labels for both states. Example: {checked: 'Foo', unchecked: 'Bar'} |
width | Number | 50 | Width of the button, default is 50 |
height | Number | 22 | Height of the button, default is 22 |
labels
object accepts HTML text (for example, you can use FontAwesome for checked/unchecked states).
Name | Description |
---|---|
change | Triggered whenever state of the component changes. Contains: value - state of the object srcEvent - source click event |
Include plugin in your nuxt.config.js
file:
module.exports = {
plugins: ['~plugins/vue-js-toggle-button']
}
And your plugins/vue-js-toggle-button.js
will look like:
import Vue from 'vue'
import Button from 'vue-js-toggle-button/dist/ssr.index'
Vue.use(Button)
- Chrome: 40+
- Firefox: 25+
- Safari: 10+
- IE: 11+
To change font size please use basic css:
.vue-js-switch#changed-font {
font-size: 16px;
}
<toggle-button id="changed-font/>