Merge pull request #62 from cristiandan/master

buttonBackground prop to customize the inner btn

Author: euvl

README.md

@@ -48,6 +48,7 @@ Use:
 | color     | [String, Object]  | `#75C791`  | If `String` - color of the button when checked <br>If `Object` - colors for the button when checked/uncheked <br>Example: `{checked: '#00FF00', unchecked: '#FF0000'}`  |
 | cssColors | Boolean           | false      | If `true` - deactivates the setting of colors through inline styles in favor of using CSS styling |
 | labels    | [Boolean, Object] | false      | If `Boolean` - shows/hides default labels ("on" and "off") <br>If `Object` - sets custom labels for both states. <br>Example: `{checked: 'Foo', unchecked: 'Bar'}`   |
+| switchColor     | [String, Object]            | `#BFCBD9`         | If `String` - color or background property of the switch when checked <br>If `Object` - colors or background property for the switch when checked/uncheked <br>Example: `{checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}`   |
 | width     | Number            | 50         | Width of the button, default is 50 |
 | height    | Number            | 22         | Height of the button, default is 22 |
 

demo/src/App.vue

@@ -34,6 +34,12 @@
           :color="{unchecked: '#FF6699'}"
           :labels="{unchecked: 'Disabled button'}"
           :disabled="true"/>
+        
+        <toggle-button :value="true"
+          :labels="{checked: 'Button', unchecked: 'Collor'}"
+          :color="{checked: '#7DCE94', unchecked: '#82C7EB'}"
+          :width="80"
+          :switchColor="{checked: 'linear-gradient(red, yellow)', unchecked: '#F2C00B'}"/>
       </div>
       <div style="padding-top: 20px;">
         <toggle-button

dist/index.js

@@ -32,7 +32,8 @@ const constants = {
   labelUnchecked: 'off',
   width: 50,
   height: 22,
-  margin: 3
+  margin: 3,
+  switchColor: '#fff'
 }
 
 const contains = (object, title) => {
@@ -68,6 +69,14 @@ export default {
           : typeof value === 'string'
       }
     },
+    switchColor: {
+      type: [String, Object],
+      validator (value) {
+        return typeof value === 'object'
+          ? (value.checked || value.unchecked)
+          : typeof value === 'string'
+      }
+    },
     cssColors: {
       type: Boolean,
       default: false
@@ -125,7 +134,8 @@ export default {
         transition: `transform ${this.speed}ms`,
         transform: this.toggled
           ? `translate3d(${this.distance}, 3px, 0px)`
-          : null
+          : null,
+        background: this.switchColor ? this.switchColorCurrent : undefined
       }
     },
 
@@ -171,7 +181,36 @@ export default {
       return contains(this.labels, 'unchecked')
         ? this.labels.unchecked
         : constants.labelUnchecked
+    },
+
+    switchColorChecked () {
+      let { switchColor } = this
+
+      return contains(switchColor, 'checked')
+        ? switchColor.checked
+        : constants.switchColor
+    },
+
+    switchColorUnchecked () {
+      let { switchColor } = this
+
+      return contains(switchColor, 'unchecked')
+        ? switchColor.unchecked
+        : constants.switchColor
+    },
+
+    switchColorCurrent () {
+      let { switchColor } = this
+
+      if (typeof switchColor !== 'object') {
+        return switchColor || constants.switchColor
+      }
+
+      return this.toggled
+        ? this.switchColorChecked
+        : this.switchColorUnchecked
     }
+
   },
   watch: {
     value (value) {