Awesome

Vue Switches

A Vue.js component for simple switches with theme support for bulma, bootstrap and custom themes. See a live demo here.

Installation

npm install vue-switches --save

Basic Usage

import Switches from 'vue-switches';

new Vue({

    components: {
        Switches
    },

    data () {
        return {
            enabled: false
        }
    }
};


<switches v-model="enabled"></switches>

Props

<table> <thead> <tr> <th>Prop</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>label</td> <td>A static label to always display whether on or off.</td> </tr> <tr> <td>text-enabled</td> <td>The text that displays when enabled.</td> </tr> <tr> <td>text-disabled</td> <td>The text that displays when disabled.</td> </tr> <tr> <td>theme</td> <td>Which theme to use.</td> </tr> <tr> <td>color</td> <td>Which color to use. </td> </tr> <tr> <td>type-bold</td> <td>Bigger style.</td> </tr> <tr> <td>emit-on-mount</td> <td>By default, a "changed" event is emitted when the component mounts. To disable this, set this to false.</td> </tr> </tbody> </table>

Theme Support

Out of the box vue-switches supports a default, bulma, bootstrap themes. To use them you can do as follows:

Providing no theme or color props would render a switch of default theme and color.


 <switches v-model="enabled"></switches>

Available colors for default are default, red, blue, green, and yellow, and orange.


<switches v-model="enabled" theme="bulma" color="default"></switches>

Available colors for Bulma are default, primary, red, blue, green, and yellow.

In addition support for bootstrap can be used as follows:


<switches v-model="enabled" theme="bootstrap" color="danger"></switches>

Available colors for bootstrap are default, primary, success, info, warning, and danger.

Styles

Out of the box vue-switches has two styles: default and bold. By default the switch is not bold. To enable the bold style you can set type-bold to true like this:


<switches v-model="enabled" type-bold="true"></switches>

A demo of all themes and styles can be seen here.

Making Your Own Themes

Vue Switcher has a base class of .vue-switcher. For an unchecked switch a class of .vue-switcher--unchecked is applied. Lastly, for the theme and color props a class is also applied. So for a bulma theme of color primary the classes .vue-switcher-theme--bulma and .vue-switcher-color--primary.

This:


<switches v-model="enabled" type-bold="false" theme="custom" color="blue"></switches>

Would render the classes .vue-switcher-theme--custom and .vue-switcher-color--blue. Sass for this theme could look like:

.vue-switcher-theme--custom {
    &.vue-switcher-color--blue {
        div {
            background-color: lighten(blue, 10%);

            &:after {
                // for the circle on the switch
                background-color: darken(blue, 5%);
            }
        }

        &.vue-switcher--unchecked {
            div {
                background-color: lighten(blue, 30%);

                &:after {
                    background-color: lighten(blue, 10%);
                }
            }
        }
    }
}

For better understanding, below is how the class object is rendered.

classObject () {

            const {color, enabled, theme, typeBold, disabled} = this;

            return {
                'vue-switcher': true,
                ['vue-switcher--unchecked']: !enabled,
                ['vue-switcher--disabled']: disabled,
                ['vue-switcher--bold']: typeBold,
                ['vue-switcher--bold--unchecked']: typeBold && !enabled,
                [`vue-switcher-theme--${theme}`]: color,
                [`vue-switcher-color--${color}`]: color,
            };

        }