https://github.com/victornpb/vt-toggle
Turn HTML checkbox inputs into fancy toggle switches with just a CSS class
https://github.com/victornpb/vt-toggle
checkbox css fancy-toggle-switches sass ui-components vt-toggle
Last synced: about 1 year ago
JSON representation
Turn HTML checkbox inputs into fancy toggle switches with just a CSS class
- Host: GitHub
- URL: https://github.com/victornpb/vt-toggle
- Owner: victornpb
- License: apache-2.0
- Created: 2017-08-06T21:50:51.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-11-30T15:05:06.000Z (over 2 years ago)
- Last Synced: 2025-04-19T04:55:19.949Z (about 1 year ago)
- Topics: checkbox, css, fancy-toggle-switches, sass, ui-components, vt-toggle
- Language: HTML
- Homepage: https://victornpb.github.io/vt-toggle/
- Size: 35.2 KB
- Stars: 14
- Watchers: 2
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vt-toggle
Turn HTML checkbox inputs into fancy toggle switches with just a CSS class
**Demo**: https://victornpb.github.io/vt-toggle/
# What is this?
You can turn a simple checkbox like this
> 
Into this fancy toggle just by addind the `vt-toggle` class
> 
# Install
Ok, cool! how can I get it?
#### [NPM](https://www.npmjs.com/package/vt-toggle)
npm install vt-toggle
#### Bower
bower install vt-toggle
#### CDN
https://unpkg.com/browse/vt-toggle@1.0.1/css/vt-toggle.css
#### Download
https://github.com/victornpb/vt-toggle/releases/
### Importing into project
#### Import using link
```html
```
##### Import using SASS
```css
@import "node_modules/vt-toggle/scss/vt-toggle"; // NPM
@import "bower_components/vt-toggle/scss/vt-toggle"; // Bower
```
### Creating your own classes using SASS
You can create your own classes using the SASS mixin.
```scss
@mixin vt-toggle($toggleWidth, $toggleHeight, $handleMargin, $roundness, $on-color, $off-color, $label)
```
Example:
```scss
@import "bower_components/vt-toggle/scss/vt-toggle";
$blue: #00f;
$red: #f00;
input.vt-toggle.accent {
@include vt-toggle(44px, 22px, 1px, 1, $blue, gray, false);
}
input.vt-toggle.danger {
@include vt-toggle(44px, 22px, 1px, 1, $red, gray, false);
}
```
Then you can use:
```html
I'm blue toggle
I'm red toggle
```
----
# Default styles
## Default Sizes:
| class | Dimensions | Preview |
|-------|-----------------|--------------------------------------------|
| xs | 18x22 | 
|
| sm | 32x16 | 
|
| md | 44x22 (default) | 
|
| lg | 64x32 | 
|
## States
| State | Preview |
|----------------|--------------------------------------------|
| On | |
| Off | 
|
| Disabled (on) | 
|
| Disabled (off) | 
|