A customizable rocker switch component for Vue.js

vue-rocker-switch

A customizable rocker switch component for Vue.js.

Installation

npm install vue-rocker-switch --save

Usage example

<template>
  <RockerSwitch />
</template>

<script>
// Import package
import RockerSwitch from "vue-rocker-switch";
// Import styles
import "vue-rocker-switch/dist/vue-rocker-switch.css";

export default {
  name: "App",
  components: {
    RockerSwitch
  }
};
</script>

Props

Prop	Description	Default value	Type
value	Boolean value attached to the rocker switcher. This will be used to initialize the component value too.	false	Boolean
size	rocker switch size, it can be a string (small, medium and large) or a decimal number	small	String or Number
labelOn	Text of the On label	On	String or Number
labelOff	Text of the Off label	Off	String or Number
activeColorLabel	Text color used when the On label is active	#fff	String
inactiveColorLabel	Text color used when the Off label is inactive	#333	String
backgroundColorOn	Background color of the On button	#0084d0	String
backgroundColorOff	Background color of the Off button	#bd5757	String
borderColor	Border color of the rocker switch	#eee	String
toggle	Allow to the rocker switch to behave as a toggle switch	true	Boolean

Events

Event	Description
change	Fires each time the rocker switch changes.

Development setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

GitHub