@catalyst-elements/catalyst-toggle-switch

A switch that toggles between two states; on and off.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
21Mar 26, 2018Feb 14, 2018Minified + gzip package size for @catalyst-elements/catalyst-toggle-switch in KB

Readme

<catalyst-toggle-switch>

Travis David David Published on webcomponents.org npm (scoped) Bower not supported Polymer 2 not supported Polymer 3 support pending

Live Demo ↗ | API documentation ↗

<catalyst-toggle-switch> is a web component toggle switch, part of the Catalyst Elements Collection. It is essentially a checkbox.

Example Usage

<catalyst-toggle-switch></catalyst-toggle-switch>

Installation

Install with npm:

npm install --save @catalyst-elements/catalyst-toggle-switch

Install with yarn:

yarn add @catalyst-elements/catalyst-toggle-switch

Please note that this package is not compatible with Bower.

Usage

As a Module (Recommend)

Import the module on each page that uses the component.

<script type="module" src="node_modules/@catalyst-elements/catalyst-toggle-switch/catalyst-toggle-switch.js"></script>

Then simply use it like any other tag.

As a Script

Import the script for the component on each page that it is uses on.

Note: you will also have to import the dependencies the component uses first.

<!-- Import dependencies -->
<script src="node_modules/@catalyst-elements/catalyst-toggle-mixin/catalyst-toggle-mixin.es5.min.js"></script>

<!-- Import the element -->
<script src="node_modules/@catalyst-elements/catalyst-toggle-switch/catalyst-toggle-switch.es5.min.js"></script>

Please note that this script has been transpiled to es5 and thus use of custom-elements-es5-adapter.js or an equivalent library is required. See es5 support on the Catalyst Elements wiki for details.

The element can then be use it like any other tag.

Browser Compatibility

See details on the Catalyst Elements' wiki: Browser Compatibility

Contributions

Contributions are most welcome.

Please read our contribution guidelines.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.