Socket
Socket
Sign inDemoInstall

vue-js-toggle-button

Package Overview
Dependencies
10
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-js-toggle-button

A toggle button component for Vue.js 2+


Version published
Maintainers
1
Weekly downloads
41,889
increased by2.7%

Weekly downloads

Readme

Source

Vue.js toggle/switch button.

Get a coffee

Live demo here

Install

npm install vue-js-toggle-button --save

Import

Import plugin:

import ToggleButton from 'vue-js-toggle-button'

Vue.use(ToggleButton)

OR

Import component:

import { ToggleButton } from 'vue-js-toggle-button'

Vue.component('ToggleButton', ToggleButton)

Use

<toggle-button @change="onChangeEventHandler"/>

<toggle-button v-model="myDataVariable"/>

<toggle-button :value="false"
               color="#82C7EB"
               :sync="true"
               :labels="true"/>

<toggle-button :value="true"
               :labels="{checked: 'Foo', unchecked: 'Bar'}"/>

Properties

NameTypeDefaultDescription
valueBooleanfalseInitial state of the toggle button
syncBooleanfalseIf set to true, will be watching changes in value property and overwrite the current state of the button whenever value prop changes
speedNumber300Transition time for the animation
disabledBooleanfalseButton does not react on mouse events
color[String, Object]#75C791If String - color of the button when checked
If Object - colors for the button when checked/unchecked or disabled
Example: {checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}
css-colorsBooleanfalseIf true - deactivates the setting of colors through inline styles in favor of using CSS styling
labels[Boolean, Object]falseIf Boolean - shows/hides default labels ("on" and "off")
If Object - sets custom labels for both states.
Example: {checked: 'Foo', unchecked: 'Bar'}
switch-color[String, Object]#BFCBD9If String - color or background property of the switch when checked
If Object - colors or background property for the switch when checked/uncheked
Example: {checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}
widthNumber50Width of the button
heightNumber22Height of the button
marginNumber3Space between the switch and background border
nameStringundefinedName to attach to the generated input field
font-sizeNumberundefinedFont size

Events

NameDescription
changeTriggered whenever state of the component changes.
Contains:
value - state of the object
srcEvent - source click event
inputInput event for v-model

SSR

Include plugin in your nuxt.config.js file:

module.exports = {
  plugins: ['~plugins/vue-js-toggle-button']
}

And your plugins/vue-js-toggle-button.js will look like:

import Vue from 'vue'
import Button from 'vue-js-toggle-button'

Vue.use(Button)

Browser compatibility

  • Chrome: 40+
  • Firefox: 25+
  • Safari: 10+
  • IE: 11+

Keywords

FAQs

Last updated on 26 Oct 2019

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