wired-toggle

Hand-drawn sketchy toggle button / switch.

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

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/lib/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. Default value is gray.

--wired-toggle-on-color Color of the knob when in on (true) position. Default value is rgb(63, 81, 181).

Events

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

License

MIT License (c) Preet Shihn

Change Log

All notable changes to this project will be documented in this file.

[2.0.0] - October 19, 2019

• New component: wired-video Video player with the hand-drawn look
• New component: wired-calendar is a calendar component contributed by @elingerojo
• New component: wired-dialog emulates dialogs
• New component: wired-divider Draws a sketchy horizontal line between two sections
• New component: wired-image Image component that frames the image in a sketchy border
• New component: wired-link Akin to <a> tag, a link with href, and a sketchy underline
• New component: wired-search-input is a text input emulating a search input
• wired-card now supports a sketchy filled background
• wired-slider is more accessible, now built on top of input range.
• Elements are more responsive to size changes using the Resize observer
• wired-textarea does not auto-grow anymore.

[1.0.0] - April 24, 2019

• New component: wired-fab mimics the floating action button proposed in Material design
• New component: wired-spinner to show pending progress in a sketchy way
• New component: wired-tabs
• Selection in Combo and List is now shown with a sketchy zig-zag fill in the style of rough.js
• Sketchy fill also applied to progress boxes
• Better Accessibility on all components
• Refactored code to use TypeScript and latest Lit Element