vuejs-toggle-switch

3.0.6 • Public • Published

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

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

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
3.0.6105latest

Version History

VersionDownloads (Last 7 Days)Published
3.0.6105
3.0.50
3.0.40
3.0.30
3.0.20
3.0.10
3.0.00
2.0.0127
1.3.445
1.3.3134
1.3.226
1.3.112
1.3.06,992
1.2.400
1.2.380
1.2.370
1.2.360
1.2.350
1.2.340
1.2.331
1.2.321
1.1.321
1.1.311
1.1.300
1.1.290
1.1.280
1.1.270
1.1.260
1.1.250
1.1.240
1.1.232
1.1.220
1.1.210
1.1.200
1.1.190
1.1.180
1.1.170
1.1.160
1.1.150
1.1.140
1.1.130
1.1.120
1.1.110
1.1.100
1.1.90
1.1.80
1.1.70
1.1.60
1.1.50
1.1.40
1.1.30
1.1.20
1.1.10
1.1.00
1.0.111
1.0.100
1.0.90
1.0.80
1.0.70
1.0.60
1.0.50
1.0.40
1.0.30
1.0.20
1.0.10
1.0.00

Package Sidebar

Install

npm i vuejs-toggle-switch

Weekly Downloads

7,448

Version

3.0.6

License

MIT

Unpacked Size

18.6 kB

Total Files

6

Last publish

Collaborators

  • larsmars