Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue-switches
Advanced tools
vue-switches - npm Package Compare versions
Comparing version 1.1.3 to 1.1.4
| { | ||
| "name": "vue-switches", | ||
| "version": "1.1.3", | ||
| "version": "1.1.4", | ||
| "description": "An on/off switch component for Vue.js with theme support.", | ||
@@ -5,0 +5,0 @@ "main": "switches.vue", |
| # 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/). | ||
| <img src="http://drewjbartlett.com/assets/demos/images/vue-switches.png" /><br> | ||
| <img src="http://drewjbartlett.com/assets/demos/images/vue-switches-bold.png" /> | ||
| <img src="http://drewjbartlett.com/assets/demos/vue-switches/vue-switches.png" /><br> | ||
| <img src="http://drewjbartlett.com/assets/demos/vue-switches/vue-switches-bold.png" /> | ||
@@ -39,12 +39,42 @@ ## Installation | ||
| ## 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> | ||
| `label` - A static label to always display whether on or off. <br /> | ||
| `text-enabled` - The text that displays when enabled. <br /> | ||
| `text-disabled` - The text that displays when disabled. <br /> | ||
| `theme` - Which theme to use. <br /> | ||
| `color` - Which color to use. <br /> | ||
| `type-bold` - Bigger style. <br /> | ||
| `emit-on-mount` - By default, a "changed" event is emitted when the component mounts. To disable this, set this to false. <br /> | ||
| </table> | ||
| ## Theme Support | ||
@@ -61,3 +91,3 @@ 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: | ||
| Available colors for `default` are `default`, `red`, `blue`, `green`, and `yellow`, and `orange. | ||
| Available colors for `default` are `default`, `red`, `blue`, `green`, and `yellow`, and `orange`. | ||
@@ -81,3 +111,3 @@ | ||
| Available colors for Bulma are `default`, `primary`, `success`, `info`, `warning`, and `danger`. | ||
| Available colors for bootstrap are `default`, `primary`, `success`, `info`, `warning`, and `danger`. | ||
@@ -108,3 +138,3 @@ ## Styles | ||
| ```css | ||
| ```scss | ||
| .vue-switcher-theme--custom { | ||
@@ -138,15 +168,15 @@ &.vue-switcher-color--blue { | ||
| const { color, enabled, theme, typeBold, disabled } = this; | ||
| 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, | ||
| }; | ||
| 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, | ||
| }; | ||
| } | ||
| } | ||
| ``` |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by4.59%
15353
- Number of lines in readme file
- increased by20.27%
178
No dependency changes