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
; components: Switches { return enabled: false };
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.
Available colors for default
are default
, red
, blue
, green
, and yellow
, and orange
.
Available colors for Bulma are default
, primary
, red
, blue
, green
, and yellow
.
In addition support for bootstrap can be used as follows:
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:
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:
Would render the classes .vue-switcher-theme--custom
and .vue-switcher-color--blue
. Sass for this theme could look like:
.vue-switcher-theme--custom
For better understanding, below is how the class object is rendered.
{ 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--`: color `vue-switcher-color--`: color ; }