https://github.com/kcmr/liquid-switch
Web Component that acts as a checkbox with the appearance of a switch
https://github.com/kcmr/liquid-switch
a11y checkbox custom-elements polymer switch switch-control web-components
Last synced: about 1 year ago
JSON representation
Web Component that acts as a checkbox with the appearance of a switch
- Host: GitHub
- URL: https://github.com/kcmr/liquid-switch
- Owner: kcmr
- License: mit
- Created: 2017-03-05T18:40:04.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-06T00:52:29.000Z (over 9 years ago)
- Last Synced: 2025-03-10T11:47:18.509Z (over 1 year ago)
- Topics: a11y, checkbox, custom-elements, polymer, switch, switch-control, web-components
- Language: HTML
- Homepage:
- Size: 2.51 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# <liquid-switch>
[](https://www.webcomponents.org/element/kcmr/liquid-switch)
_[Demo and API docs](https://kcmr.github.io/liquid-switch/components/liquid-switch/)_
`` is a custom element that acts as a checkbox and has the appearance of a switch.
```html
Switch label
```
## Installation and usage
1. Install the component using [Bower](http://bower.io/):
```bash
$ bower liquid-switch i -S
```
2. Import Web Components polyfill:
```js
```
3. Import Custom Element:
```html
```
4. Use it!:
```html
Switch label
```
## 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 | {}