<liquid-switch> is a custom element that acts as a checkbox and has the appearance of a switch.
<liquid-switch checked>Switch label</liquid-switch>- Install the component using Bower:
$ bower liquid-switch i -S- Import Web Components polyfill:
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>- Import Custom Element:
<link rel="import" href="bower_components/liquid-switch/liquid-switch.html">- Use it!:
<liquid-switch checked>Switch label</liquid-switch>The following custom properties and mixins are available for styling.
Note: all the values are unitless but border-radius.
| Custom property | Description | Default |
|---|---|---|
| --liquid-switch-switch-background-color | Background color of the switch | #f5f5f5 |
| --liquid-switch-switch-width | Switch width | 40 |
| --liquid-switch-switch-padding | Padding between switch and knob | 3 |
| --liquid-switch-border-radius | border-radius of the switch | 10px |
| --liquid-switch-knob-color-on | Knob checked color | #7eb30f |
| --liquid-switch-knob-color-off | Knob unchecked color | #aeb5ae |
| --liquid-switch-knob-size | Size of the knob (width and height) | 16 |
| --liquid-switch-bar | Empty mixin applied to the switch | {} |
| --liquid-switch-knob | Empty mixin applied to the knob | {} |