Skip to content

Web Component that acts as a checkbox with the appearance of a switch

License

Notifications You must be signed in to change notification settings

kcmr/liquid-switch

Repository files navigation

<liquid-switch>

Published on webcomponents.org

Demo and API docs

<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>

Installation and usage

  1. Install the component using Bower:
$ bower liquid-switch i -S
  1. Import Web Components polyfill:
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  1. Import Custom Element:
<link rel="import" href="bower_components/liquid-switch/liquid-switch.html">
  1. Use it!:
<liquid-switch checked>Switch label</liquid-switch>

Styling

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 {}