Inline Button Toggle Switch For Vue

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