Directory

← Back

wired-toggle

A toggle button with a sketchy hand drawn look

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/wiredjs/wired-toggle on 2019-05-10 ]

wired radio

wired-toggle

Hand-drawn sketchy toggle button web component.

For demo and view the complete set of wired-elememts: wiredjs.com

Learn about web components here.

Usage

Add wired-toggle to your project:

npm i wired-toggle

Import wired-toggle definition into your HTML page:

<script type="module" src="wired-toggle/wired-toggle.js"></script>

Or into your module script:

import { WiredToggle } from "wired-toggle"

Use it in your web page:

<wired-toggle></wired-toggle>
<wired-toggle checked></wired-toggle>

Properties

checked - Checked state (boolean).

disabled - disables the toggle button. Default value is false.

Custom CSS Variables

--wired-toggle-off-color Color of the knob when in off (false) position.

--wired-toggle-on-color Color of the knob when in on (true) position.

Events

change event fired when state of the toggle is changed by the user.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • polymer#Polymer/polymer#^2.0.0
  • wired-lib#^0.1.1
Released
2017-08-30
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

wired-toggle - Vaadin Add-on Directory

A toggle button with a sketchy hand drawn look wired-toggle - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/wiredjs/wired-toggle](https://github.com//wiredjs/wired-toggle/blob/v0.5.0/README.md) on 2019-05-10 ]** ![wired radio](https://wiredjs.github.io/wired-elements/images/toggle.png) # wired-toggle Hand-drawn sketchy toggle button web component. For demo and view the complete set of wired-elememts: [wiredjs.com](http://wiredjs.com/) Learn about web components [here](https://www.webcomponents.org/introduction). ## Usage Add wired-toggle to your project: ``` npm i wired-toggle ``` Import wired-toggle definition into your HTML page: ```html ``` Or into your module script: ```javascript import { WiredToggle } from "wired-toggle" ``` Use it in your web page: ```html ``` ### Properties **checked** - Checked state (boolean). **disabled** - disables the toggle button. Default value is false. ### Custom CSS Variables **--wired-toggle-off-color** Color of the knob when in off (false) position. **--wired-toggle-on-color** Color of the knob when in on (true) position. ### Events **change** event fired when state of the toggle is changed by the user.
Online Demo
Documentation
GitHub Homepage
Issue tracker
View on GitHub

wired-toggle version 0.1.0
### Dependencies * polymer#Polymer/polymer#^2.0.0 * wired-lib#^0.1.1

wired-toggle version 0.1.1
### Dependencies * polymer#Polymer/polymer#^2.0.0 * wired-lib#^0.1.1

wired-toggle version 0.1.2
### Dependencies * polymer#Polymer/polymer#^2.0.0 * wired-lib#^0.1.1

wired-toggle version 0.2.0
### Dependencies * polymer#Polymer/polymer#^2.0.0 * wired-lib#^0.1.1

Online