Skip to content

drewjbartlett/vue-switches

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 

Vue Switches

npm npm

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

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

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,
            };

        }