a-simple-switch
Advanced tools
Simple, accessible, performant implementation of the Switch UI element.
Features:
Below are the gzipped sizes of the source files. All measured using an Apache server and Google Chrome.
| File | Size (after gzip) |
|---|---|
SimpleSwitch.css | 785 bytes |
SimpleSwitch.min.js | 1.4 kilobytes |
To install the Switch code, you will need to in some way include the Simple Switch Javascript and CSS into your page/build. Please follow the relevant instructions below for more information.
To get the latest minified/production ready files, please see the releases page.
The Javascript is available as a NPM package, buildable through Webpack, or as a minified/uglified file that can be directly imported into the page.
The minified Javascript file is available on the
releases page,
within the release .zip file, under js/.
Alternatively, the Webpack package can be installed by running:
npm i --save a-simple-switch
And then importing it into your webpack build by saying:
import * as SimpleSwitch from "a-simple-switch";
You can install the CSS by downloading the compiled CSS file from the
releases page,
under css/.
You can import the relevant SASS file into your SASS build by either downloading
the latest release from the
releases page and
grabbing the SASS file from the sass/ directory in the release, or you may
directly import it from the source code:
@import "path/to/SimpleSwitch/src/sass/SimpleSwitch.scss";
There are two ways to create a Simple Switch. On page load, the Simple Switch code will automatically detect checkboxes that are flagged as switches, and upgrade them, or you may manually instantiate a switch. See below for more details.
To have a switch be automatically upgraded, simply add the data-type attribute
to any checkbox-type input that you want upgraded, and set that attribute to the
value of simple-switch. Then, at the end of your <body> tag, simply call
SimpleSwitch.init() to initialize all of the switches marked as noted above.
Example:
<input type="checkbox" name="my-checkbox" data-type="simple-switch" />
Javascript Setup:
<!-- ^^ Rest of your page above ^^ -->
<script type="text/javascript">
SimpleSwitch.init();
</script>
</body>
You may also manually instantiate a switch, which may be useful for
lazily-loaded UI elements or parts of the page. The Switch class which handles
upgrading and controlling Switches is available under the SimpleSwitch
namespace, and takes one parameter, element, which is a direct reference to
the HTMLElement checkbox to be upgraded.
Example:
<input type="checkbox" name="my-checkbox" id="my-checkbox" />
var myCheckbox = document.getElementById("my-checkbox");
new SimpleSwitch.Switch({
element: myCheckbox
});
FAQs
Vanilla JS/CSS Switch UI element
The npm package a-simple-switch receives a total of 283 weekly downloads. As such, a-simple-switch popularity was classified as not popular.
We found that a-simple-switch demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.