vue-rocker-switch

A customizable rocker switch component for Vue.js.

Installation

npm install vue-rocker-switch --save

Demo

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

Customize configuration

See Configuration Reference.

Contributing

1. Fork it (https://github.com/dannyfeliz/vue-rocker-switch/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• This project was inspired by this post from codepen.io Checkbox Toggle Switches Are Confusing UI by @MarcusConnorNH