Socket
Socket
Sign inDemoInstall

vuejs-toggle-switch

Package Overview
Dependencies
0
Maintainers
1
Versions
66
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vuejs-toggle-switch

A toggle switch component for Vue.js


Version published
Maintainers
1
Weekly downloads
531
decreased by-3.28%

Weekly downloads

Readme

Source

vuejs-toggle-switch

Toggle switch for vue.js
v2.0.0

Live demo

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

NB! Version 1.2.32 and later use rem instead of px NM! Version 2.0.0 and later use value prop.

Setup

install:

npm install vuejs-toggle-switch --save

Import: (in your main.js)

import ToggleSwitch from 'vuejs-toggle-switch'
Vue.use(ToggleSwitch)

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)
  :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
  /> 

<!-- 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: {
    fontSize: 14,
    height: 34,
    padding: 7,
    width: 100
  },
  config: {
    delay: .4,
    preSelected: 'unknown',
    disabled: false,
    items: [
        { name: 'Off', value: 'Off', color: 'white', backgroundColor: 'red' },
        { name: 'On', value: 'On', color: 'white', backgroundColor: 'green' }
    ]
  }
}

Properties

NameTypeDefaultDescription
widthNumber10Width of labels
heightNumber3.25Height
paddingNumber0.5Adjust text location in item with this
backgroundColorStringlightgrayBackground color (not selected)
colorStringblackText color (not selected)
borderColorStringgrayborder color
selectedColorStringwhiteText color selected item
selectedBackgroundColorStringgreenSelected item background color
fontFamilyStringArialFont of item text
fontWeightStringnormalFont weight item (not selected)
fontWeightSelectedStringboldFont weight selected item
fontSizeNumber1.5Text size
disabledBooleanfalseDisable switch
preSelectedStringOnSet (pre) selected item
itemsArrayOff/OnItems for switch, name and value (string) mandatory
valueStringn/aValue, ie: v-model="selectedMapOption"
delayNumber.4Transition delay between labels is seconds
squareCornersBooleanfalseRounded corners of switch
noBorderBooleanfalseRemove border
groupString''Switch key/group name (optional)
nameString''Name for input field (optional) can be used as ref for forms etc
disabled (prop)BooleanfalseDisable 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

NameDescription
changeTriggered on toggle, user selects switch option, returns current value. @change="vmValueItem = $event.value"
selectedTriggered whenever user select switch item
inputTriggered on mount if preSelected is set or value is set, and on toggle/change

Keywords

FAQs

Last updated on 02 Jun 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc