Using awesome toggle buttons without Javascript or any other logic, other than plane form elements. The Pattern is the same as Twitter-Bootstrap. So it can be implemented without a breeze.
Browser support: Internet Explorer 9/10/11, Edge, FireFox, Safari, Chrome, Safari Ios, Stock Android browser 4.2, Chrome Android
Version 1.0.0 of TitaToggle has support for Bootstrap v3.x.x
The only difference between default Bootstrap is the additional span
. After that it's only a question of adding a class that fits your needs.
The Bootstrap 4 default way of generating checkbox looks a like this:
<div class="checkbox">
<label>
<input type="checkbox">default Bootstrap 4
</label>
</div>
Just by adding one
<span> <="" span>="" code="">
</span>>
plus the class
.checkbox-slider--TYPE
you get this result:
<div class="checkbox checkbox-slider--default">
<label>
<input type="checkbox"><span>TiTaToggle</span>
</label>
</div>
Don't forget to add the span
after the input
Out of the box this would be the modest version, without any bells and whistles.
<div class="... checkbox-slider--default">
...
</div>
It takes the edge off.
<div class="... checkbox-slider--a-rounded">
...
</div>
Sometimes you need some text to double the meaning / state of the checkbox. I've noticed many people have trouble with a checkbox, when it's "On" of "Off". To make this more clear, you can use this version.
<div class="... checkbox-slider--a">
...
</div>
An iOS like version of just a plain checkbox.
<div class="... checkbox-slider--b">
...
</div>
Just flat, it seems to be very fashionable. We just wait until the bevel is back.
<div class="... checkbox-slider--b-flat">
...
</div>
Inspired by the Google material toggle boxes. And again this is just plain Bootstrap 3.
<div class="... checkbox-slider--c">
...
</div>
Giving the slider some more weight.
<div class="... checkbox-slider--c-weight">
...
</div>
Propper sizing option should get the pony over the hill for your next project.
Next to the default size there are 3 sizes:
_titatoggle.less
to alther your preferend settings and sizes.
<div class="... checkbox-slider-sm ...">
...
</div>
<div class="... <DEFAULT> ...">
...
</div>
<div class="... checkbox-slider-md ...">
...
</div>
<div class="... checkbox-slider-lg ...">
...
</div>
Small visual que for the label to show that the checkbox is checked.
<div class="checkbox ...">
...
<span class="indicator-success">danger</span>
...
</div>
<div class="checkbox ...">
...
<span class="indicator-info">danger</span>
...
</div>
<div class="checkbox ...">
...
<span class="indicator-warning">danger</span>
...
</div>
<div class="checkbox ...">
...
<span class="indicator-danger">danger</span>
...
</div>
Checkboxes can have different colors, just like buttons.
We use the default Bootstrap variables @brand-XXX
to color the checkbox.