MoreToggles.css is a pure CSS library that provides you with a variety of nice-looking toggles.
You only have to attach a class to the wrapper div and MoreToggles.css will do the magic for you.
Check out all available styles here
Features
🔹 Pure CSS
🔹 13 different styles (more styles are coming)
🔹 Perfect scaling
Import the stylesheet into your document's <head>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/[email protected]/output/moretoggles.min.css">
</head>Wrap an extra div around your <input> and <label>. Pick a style here
. Add the corresponding mt-* class to <div>.
<div class="mt-ios">
<input id="1" type="checkbox" />
<label for="1"></label>
</div>npm install moretogglesImport in js/jsx
// Import the minified CSS
import '../node_modules/moretoggles/output/moretoggles.min.css'
// Or
// import the Sass source file
import '../node_modules/moretoggles/src/moretoggles.scss'Or import in Sass
@charset "utf-8";
@import "../node_modules/moretoggles/src/moretoggles";MoreToggles.css currently has 13 different styles. And for each style, several color patterns are provided.
Check out all available styles here
To choose a style, replce the class name of the wrapper <div> with one of the options here.
<div class="REPLACE_ME">
<input id="2" type="checkbox" />
<label for="2"></label>
</div>Example for .mt-android-pink style
<div class="mt-android-pink">
<input id="3" type="checkbox" />
<label for="3"></label>
</div>If you care about the size of CSS files. Instead of importing moretoggles.min.css, you can import single style separately.
In the /output folder, you can find all of the built CSS files.
The naming convention is moretoggles.STYLE_NAME.min.css
Example for importing only Android Style
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/[email protected]/output/moretoggles.android.min.css">
</head>You can change the size of the toggles by assigning a font-size attribute style="font-size:10px;" to the wrapper div. You can try different numbers and the toggle will scale smoothly.
<div class="mt-ios" style="font-size:10px;">
<input id="4" type="checkbox" />
<label for="4"></label>
</div>Just like regular checkbox, you can add disabled attribute to <input> tag.
<div class="mt-ios">
<input id="5" type="checkbox" disabled/>
<label for="5"></label>
</div>Since the toggle is actually an <input> with type="checkbox", you can use addEventListener to listen to the onchange event.
<div class="mt-ios">
<input id="6" type="checkbox" />
<label for="6"></label>
</div>
<script>
const toggle = document.getElementById('6');
toggle.addEventListener('change', (event) => {
if (event.target.checked) {
alert('checked');
} else {
alert('not checked');
}
});
</script>Nesting the <input> directly inside the <label> is NOT supported, although it is valid HTML syntax.
Don't
<div class="mt-ios">
<label>
<input type="checkbox" />
</label>
</div>Do 😃
<div class="mt-ios">
<input id="1" type="checkbox" />
<label for="1"></label>
</div>MoreToggles.css is licensed under the MIT license. (https://opensource.org/licenses/MIT)
This project is still in very early stage. Your contribution is very welcome. Feel free to submit a pull request!
npm installnpm run startThis will start the webpack-dev-server and render the showcase page- Start developing and see live updates in the browser
Before commit, you should build the showcase page and compile Sass to css in /output. Please follow the details below.
Build the showcase page
npm run build-doc
Build and minify css
npm run build-css
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent