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

| Name | Type | Default | Description | | --- | --- | --- | --- | | width | Number | 10 | Width of labels | | height | Number | 3.25 | Height | | padding | Number | 0.5 | Adjust text location in item 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 item | | selectedBackgroundColor | String | green | Selected item background color | | fontFamily | String | Arial | Font of item 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 item | | items | Array | Off/On | Items for switch, name and value (string) mandatory | | modelValue | String | n/a | Value, ie: v-model="selectedMapOption" | | 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 |