An inline button-style toggle switch component for Vue.js.
How to use it:
1. Import and register the ToggleSwitch.
import ToggleSwitch from 'vuejs-toggle-switch' Vue.use(ToggleSwitch)
2. Add the ToggleSwitch component to your app.
<toggle-switch />
3. Available component props.
options: { type: Object, required: false }, value: { type: String, required: false }, name: { type: String, required: false }, group: { type: String, required: false, default: '' }, disabled: { type: Boolean, required: false, default: false }
4. All default options.
defaultOptions = { layout: { color: 'black', backgroundColor: 'lightgray', selectedColor: 'white', selectedBackgroundColor: 'green', borderColor: 'gray', fontFamily: 'Arial', fontWeight: 'normal', fontWeightSelected: 'bold', squareCorners: false, noBorder: false }, size: { fontSize: 1.5, height: 3.25, padding: 0.5, width: 10 }, config: { delay: 0.4, preSelected: 'unknown', disabled: false, items: [ { name: 'Off', value: "0", color: 'white', backgroundColor: 'red' }, { name: 'On', value: "1", color: 'white', backgroundColor: 'green' } ] } }
5. Events.
- @change
- @selected
- @input
Preview:
Changelog:
v3.0.6 (05/16/2023)
- Fix styling
Download Details:
Author: larsmars
Live Demo: http://softwarefun.no/#/toggleswitch
Download Link: https://github.com/larsmars/vuejs-toggle-switch/archive/master.zip
Official Website: https://github.com/larsmars/vuejs-toggle-switch
Install & Download:
# NPM
$ npm install vuejs-toggle-switch --save