vuejs-toggle-switch
Toggle switch for vue.js
v3.0.6
Tested OK v3.0.6 for Vue 3.2.47 16.05.2023
Do you have questions or want a new feature? Use the "Issues" section
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 |