vuejs-toggle-switch v3.0.6

vuejs-toggle-switch

Toggle switch for vue.js v3.0.6

Live demo

Tested OK v3.0.6 for Vue 3.2.47 16.05.2023 :white_check_mark:

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

Setup

install:

npm install vuejs-toggle-switch --save

Import:

import { ToggleSwitch } from 'vuejs-toggle-switch'

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 config 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)
  :modelValue="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: {
    height: 2,
    width: 16,
    padding: 0.4,
    fontSize: 1
  },
  config: {
    preSelected: 'On',
    disabled: false,
    items: [
        { name: 'Off', value: 'Off', color: 'white', backgroundColor: 'red' },
        { name: 'On', value: '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