vuejs-three-state-switch v1.3.4

vuejs-three-state-switch

Toggle switch for vue.js v1.3.0

Setup

install:

npm install vuejs-three-state-switch --save

Import: (in your main.js)

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

Usage

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

Simple:
<toggle-switch group="a" :options="myOptions" @change="log($event.value)" v-model="value1"/>
<toggle-switch group="b" :options="myOptions" @change="log($event.value)" v-model="value2"/>
<!-- Options struct: -->
myOptions: {
    items: {
        preSelected: 'unknown',
        labels: [
        { name: 'Off', color: 'white', backgroundColor: 'red' },
        { name: 'unknown', color: 'white', backgroundColor: 'grey' },
        { name: 'On', color: 'white', backgroundColor: 'green' }
        ]
    }
}

Detailed:
<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
  /> 

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

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

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