vuejs-toggle-switch

vuejs-toggle-switch

Toggle switch for vue.js 2+

Live demo only image under

Only 1 dependency (vue)

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
        preSelected="Map" // This is optional     
        :labels="{map: 'Map', transit: 'Transit', satellite: 'Satellite'}"
        :width="380" // This is optional
        :height="24" // This is optional
        :padding="2" // This is optional
        @change="updateMap($event.value)" // This is optional
        @selected="selectedMethod() // This is optional
        v-model="selectedMapOption"/> // This is optional

Properties

Name	Type	Default	Description
width	Number	100	Width of labels
height	Number	34	Height
padding	Number	7	adjust text location in label with this
backgroundColor	String	white	background color (not selected)
color	String	black	text color (not selected)
borderColor	String	#007aff	border color
selectedColor	String	white	text color selected label
selectedBackgroundColor	String	#007aff	selected label background color
fontFamily	String	n/a	font of label text
fontSize	Number	14	text size
disabled	Boolean	false	disable switch
preSelected	String	unknown	set (pre) selected label
labels	[String, Object]	n/a	labels for switch
value	String	n/a	value, ie: v-model="selectedMapOption"

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