Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

MoreToggles.css

Toggles 1.png

release badge jsDelivr hits badge license badge


MoreToggles.css is a pure CSS library that provides you with a variety of nice-looking toggles.

You only have to add a new ClassName 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

Usage

Import the stylesheet into your document's <head>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/MoreToggles.css@0.2.1/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>

Styles

MoreToggles.css currently has 13 different styles. And for each style, several color patterns are provided.

Check out all available styles here

List of all the available class names:

IOS Style mt-ios mt-ios-red mt-ios-blue

Android Style mt-android mt-android-indigo mt-android-violet mt-android-pink mt-android-orange

IO Switch Style mt-io mt-io-yellow mt-io-garden mt-io-navi mt-io-violet

Normal Style mt-normal mt-normal-garden mt-normal-navi mt-normal-violet mt-normal-juice

Transparent Style mt-transparent mt-transparent-navi mt-transparent-violet mt-transparent-blood mt-transparent-brown

Check Style mt-check mt-check-garden mt-check-matte mt-check-fruit mt-check-pink

Yes No Style mt-yesno mt-yesno-garden mt-yesno-matte mt-yesno-fruit mt-yesno-blush

Square Style mt-square mt-square-garden mt-square-tomato mt-square-matcha mt-square-pink

Square 3d Style mt-square3d mt-square3d-garden mt-square3d-tomato mt-square3d-matcha mt-square3d-blush

Emoji Style mt-emoji-mood mt-emoji-gender mt-emoji-pet mt-emoji-mute mt-emoji-like

Star Style mt-star mt-star-garden mt-star-tomato mt-star-pink mt-star-golden

Heart Style mt-heart mt-heart-blush mt-heart-indigo mt-heart-pink mt-heart-golden

Icon Switch Style mt-icon-music mt-icon-ring mt-icon-mic mt-icon-cam mt-icon-pin

Import Only a Single Style

If you care about the size of CSS files. Instead of import moretoggles.min.css, you can import the styles you want sepsrately.

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/MoreToggles.css@0.2.1/output/moretoggles.android.min.css">
</head>

Scaling

You can scale the toggles by assign 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="3" type="checkbox" />
  <label for="3"></label>
</div>

Disabled Toggles

Just like regular checkbox, you can add disabled attribute to <input> tag.

<div class="mt-ios">
  <input id="4" type="checkbox" disabled/>
  <label for="4"></label>
</div>

Listening to the change event

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="5" type="checkbox" />
  <label for="5"></label>
</div>

<script>
  const toggle = document.getElementById('5');

  toggle.addEventListener('change', (event) => {
    if (event.target.checked) {
      alert('checked');
    } else {
      alert('not checked');
    }
  });
</script>

Notice

Nest 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>

License

MoreToggles.css is licensed under the MIT license. (https://opensource.org/licenses/MIT)

Contributing

This project is still in very early stage. Your contribution is very welcome. Feel free to submit a pull request!

General Workflow

  1. npm run serve-alltoggles
  2. Make your change and see live updates in the browser
  3. Make sure everything looks okay and the change does not break other styles
  4. npm run build
  5. npm run build-alltoggles

About

A pure CSS library that provides you with a variety of nice-looking toggles

Topics

Resources

License

Packages

No packages published