kleinejan / titatoggle Goto Github PK
View Code? Open in Web Editor NEWPure css toggle buttons based on the bootstrap checkbox pattern
Home Page: http://kleinejan.github.io/titatoggle/
License: MIT License
Pure css toggle buttons based on the bootstrap checkbox pattern
Home Page: http://kleinejan.github.io/titatoggle/
License: MIT License
Printing does not print switches but does print checkboxes. Otherwise, it is plum! :)
Hi!
This looks like a great plugin!
What is the browser support for these checkboxes?
Take a look at this example: http://jsfiddle.net/L9mzV/
Where you can have the text on the right vs the left.
Is it possible to do the same here ?
The name defined in package.json
doesn't conform to the NPM standards as detailed here
https://docs.npmjs.com/files/package.json#name
Specifically:
- New packages must not have uppercase letters in the name.
This prevents the package being installed at all using npm3
Make the same pattern for Radio buttons.
A two way toggle between values.
Hello. I've included the titatoggle-dist.css into my ReactJS project but the toggle doesn't seem to be working (looks disabled). Is there something I may be doing wrong?
<div className="checkbox checkbox-slider--b-flat checkbox-slider-warning"><input type="checkbox" /><span></span></div>
Use 2 radiobuttons (group) to toggle a value/switch, the same way as a checkbox does currently.
Semantically not ideal but this is no ideal world :)
I'm trying to duplicate the results here:
http://kleinejan.github.io/titatoggle/
Specifically, first and last lines of this:
Using this code:
<div class="checkbox checkbox-slider--default">
<label>
<input type="checkbox">
<span>default</span>
</label>
</div>
<div class="checkbox checkbox-slider--default">
<label>
<input type="checkbox" disabled>
<span>disabled</span>
</label>
</div>
Here's the test project.
titatoggle.zip
Your example seems to reference classes which are not in titatoggle-dist.css.
I'd love to be able to toggle between states like "absolute/relative" what that text currently within the toggle where the "On/Off" text currently lives. Is there a way to customize this?
What do you think about supporting an :indeterminate state for checkbox inputs?
Hi there. Somehow the responsiveness of these are impacted when used on a cordova project with iOS. It seems that there is an initial delay before hand.
I am using this one in my case:
<div class="checkbox checkbox-slider--c checkbox-slider-info">
<label>
<input type="checkbox"><span>something</span>
</label>
</div>
When running grunt serve and played through chrome there is no performance issues.
When running cordova emulate ios or cordova build ios and loading it on iPhone through xCode that is when there is a 0.5second delay.
Would you have any idea to why?
Thank you! and otherwise very cool stuff.
Hi @kleinejan ,
We are cdnjs team, we want to host this library on cdnjs.
I found that license in package.json show BSD-2-Clause
but there is GNU-General-Public-License-v2.0.txt in the repo. Could you please help me check which license used for the repo? Thanks.
When do you plan to release a new version with the last most recent changes?
This results in a green slider - it should be red:
<div class="checkbox checkbox-slider--a-rounded checkbox-slider-danger">
<label>
<input type="checkbox" checked><span>checked</span>
</label>
</div>
When used in plain Bootstrap form, everything is fine:
<form>
<div class="checkbox checkbox-slider--default">
<label>
<input type="checkbox"><span>TiTaToggle</span>
</label>
</div>
</form>
When used within form-horizontal:
<form class="form-horizontal">
<div class="checkbox checkbox-slider--default">
<label>
<input type="checkbox"><span>TiTaToggle</span>
</label>
</div>
</form>
then, because of this Bootstrap css rule, and this property: padding-top: 7px
:
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 7px;
margin-top: 0;
margin-bottom: 0;
}
the handle and its container are not top aligned - the container is pushed down, but not the handle.
A way to correct, for my limited css knowledge, may be to add margin-top: 7px;
to this rule
.checkbox-slider--default input + span:after {
background: #ffffff;
border: solid transparent 1px;
background-clip: content-box;
}
and all other rules like this one.
Regards and thanks for great component!
Tomasz
Have a look at this page. There seems to be no difference.
https://kleinejan.github.io/titatoggle/
Hi there, Thanks for your work! It's great and so simple solution!
But I have one problem - it's checking and unchecking the styled checkbox via JS. Here is the demo http://take.ms/ysu1S , I can't set checked attribute to the styled checkbox. Do you have any ideas here?
When you click on the toggle you get a focus ring or outline when using Chrome (I'm using latest version on Mac). Safari and Firefox don't have this issue.
I can't seem to get rid of it using the usual :focus {outline: none;} or
outline-style:none;
box-shadow:none;
border-color:transparent;
Nice job. Is it possible to turn radio buttons into switches. I use bootstrap switch but I would prefer a pure less solution. Thank you.
Hello!
I would like to use titatogle but I don't work with node. How I can install and use without node? For example, I work with bootstrap 4. Maybe, I just need to change the css? Please, a step by step would be nice. Thank you.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.