项目作者: drewjbartlett

项目描述 :
An on/off switch component for Vue.js with theme support.
高级语言: CSS
项目地址: git://github.com/drewjbartlett/vue-switches.git
创建时间: 2017-01-16T06:06:11Z
项目社区:https://github.com/drewjbartlett/vue-switches

开源协议:

下载


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

  1. npm install vue-switches --save

Basic Usage

  1. import Switches from 'vue-switches';
  2. new Vue({
  3. components: {
  4. Switches
  5. },
  6. data () {
  7. return {
  8. enabled: false
  9. }
  10. }
  11. };
  1. <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.

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

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

  1. <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:

  1. <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:

  1. <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:

  1. <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:

  1. .vue-switcher-theme--custom {
  2. &.vue-switcher-color--blue {
  3. div {
  4. background-color: lighten(blue, 10%);
  5. &:after {
  6. // for the circle on the switch
  7. background-color: darken(blue, 5%);
  8. }
  9. }
  10. &.vue-switcher--unchecked {
  11. div {
  12. background-color: lighten(blue, 30%);
  13. &:after {
  14. background-color: lighten(blue, 10%);
  15. }
  16. }
  17. }
  18. }
  19. }

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

  1. classObject () {
  2. const {color, enabled, theme, typeBold, disabled} = this;
  3. return {
  4. 'vue-switcher': true,
  5. ['vue-switcher--unchecked']: !enabled,
  6. ['vue-switcher--disabled']: disabled,
  7. ['vue-switcher--bold']: typeBold,
  8. ['vue-switcher--bold--unchecked']: typeBold && !enabled,
  9. [`vue-switcher-theme--${theme}`]: color,
  10. [`vue-switcher-color--${color}`]: color,
  11. };
  12. }