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

| 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~~