Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/drewjbartlett/vue-switches
An on/off switch component for Vue.js with theme support.
https://github.com/drewjbartlett/vue-switches
bootstrap bulma demo switch-control theme-support vue vue-components
Last synced: 7 days ago
JSON representation
An on/off switch component for Vue.js with theme support.
- Host: GitHub
- URL: https://github.com/drewjbartlett/vue-switches
- Owner: drewjbartlett
- Created: 2017-01-16T06:06:11.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-08-10T09:08:24.000Z (over 3 years ago)
- Last Synced: 2024-12-28T13:11:38.180Z (14 days ago)
- Topics: bootstrap, bulma, demo, switch-control, theme-support, vue, vue-components
- Language: CSS
- Homepage: http://drewjbartlett.com/demos/vue-switches/
- Size: 28.3 KB
- Stars: 209
- Watchers: 7
- Forks: 41
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Switches
[](https://www.npmjs.com/package/vue-switches)
[](https://www.npmjs.com/package/vue-switches)
A Vue.js component for simple switches with theme support for [bulma](http://bulma.io), [bootstrap](http://getbootstrap.com/) and custom themes. See a live demo [here](http://drewjbartlett.com/demos/vue-switches/).
## Installation
```bash
npm install vue-switches --save
```
## Basic Usage
```javascript
import Switches from 'vue-switches';
new Vue({
components: {
Switches
},
data () {
return {
enabled: false
}
}
};
```
```html
```
## 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](http://bulma.io), [bootstrap](http://getbootstrap.com/) themes. To use them you can do as follows:
Providing no `theme` or `color` props would render a switch of default theme and color.
```html
```
Available colors for `default` are `default`, `red`, `blue`, `green`, and `yellow`, and `orange`.
```html
```
Available colors for Bulma are `default`, `primary`, `red`, `blue`, `green`, and `yellow`.
In addition support for bootstrap can be used as follows:
```html
```
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:
```html
```
A demo of all themes and styles can be seen [here](http://drewjbartlett.com/demos/vue-switches/).
## 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:
```html
```
Would render the classes `.vue-switcher-theme--custom` and `.vue-switcher-color--blue`. Sass for this theme could look like:
```scss
.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.
```javascript
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,
};
}
```