🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

An inline button-style toggle switch component for Vue.js.

Form

Documentation

vuejs-toggle-switch

Toggle switch for vue.js
v1.3.0

Live demo

Do you have questions or want a new feature? Use the "Issues" section 👈

NB! Version 1.2.32 now use rem instead of px

Setup

install:

npm install vuejs-toggle-switch --save

Import: (in your main.js)

import ToggleSwitch from 'vuejs-toggle-switch' Vue.use(ToggleSwitch)

Usage

Use: (in your local .vue file/component, html section)

<toggle-switch   :options="myOptions"   :disabled="false" // optional, can use here on top level or in items section   @change="updateMap($event.value)" // This is optional   @selected="selectedMethod()" // This is optional   v-model="selectedMapOption" // This is optional 2-way binding (try not to use both 1-way and 2-way)   :value="selectedMapOption" // This is optional 1-way binding (try not to use both 1-way and 2-way)   :name="name" // This is optional for input block   :group="switchGroup" // This is optional, use if multiple toggle-switch on same page with same label names   />   <!-- Options struct: --> myOptions: {   layout: {     color: 'black',     backgroundColor: 'lightgray',     selectedColor: 'white',     selectedBackgroundColor: 'green',     borderColor: 'black',     fontFamily: 'Arial',     fontWeight: 'normal',     fontWeightSelected: 'bold',     squareCorners: false,     noBorder: false   },   size: {     fontSize: 14,     height: 34,     padding: 7,     width: 100   },   items: {     delay: .4,     preSelected: 'unknown',     disabled: false,     labels: [       {name: 'Off', color: 'white', backgroundColor: 'red'},        {name: 'On', color: 'white', backgroundColor: 'green'}     ]   } }

Properties

Name Type Default Description
width Number 10 Width of labels
height Number 3.25 Height
padding Number 0.5 Adjust text location in label with this
backgroundColor String lightgray Background color (not selected)
color String black Text color (not selected)
borderColor String gray border color
selectedColor String white Text color selected label
selectedBackgroundColor String green Selected label background color
fontFamily String Arial Font of label text
fontWeight String normal Font weight item (not selected)
fontWeightSelected String bold Font weight selected item
fontSize Number 1.5 Text size
disabled Boolean false Disable switch
preSelected String On Set (pre) selected label
labels Array Off/On Labels for switch, name property is mandatory
value String n/a Value, ie: v-model="selectedMapOption"
delay Number .4 Transition delay between labels is seconds
squareCorners Boolean false Rounded corners of switch
noBorder Boolean false Remove border
group String '' Switch key/group name (optional)
name String '' Name for input field (optional) can be used as ref for forms etc
disabled (prop) Boolean false Disable switch on top level (prop)

Labels prop can be used with or without color and backgroundColor attr, if not used the common prop: selectedColor and selectedBackgroundColor will be used for all labels.

Events

Name Description
change Triggered on toggle, user selects switch option, returns current value. @change="vmValueItem = $event.value"
selected Triggered whenever user select switch item
input Triggered on mount if preSelected is set or value is set, and on toggle/change

Todo 📌

  • Pass class name to switch
  • Option to use id for labels not only name
  • Add disabled to top level
  • Add coditional class "slected" to label if selected

You May Also Like