What is VC-Toggle-Switch?

This is a little toggle I made that is completely independent of framework. It is highly customizable, and will look good within any app.

Why?

I made this so I could use it inside an AngularJS (1.0.0) app, and I think your reasons should be the same: you're looking for something that will work anywhere, and that looks good.

How do I use this?

This toggle was made in a way that you won't need much (or any) CSS to adapt it into your app. It also should be very plug'n play. This is an easy example of its implementation:

<div class="vc-toggle-container">
  <label class="vc-switch">
    <input type="checkbox" class="vc-switch-input" />
    <span class="vc-switch-label" data-on="Yes" data-off="No"></span>
    <span class="vc-handle"></span>
  </label>
</div>

This is the basic structure that will generate the default toggle. Also, don't forget to import its CSS file into your HTML:

<link rel="stylesheet" type="text/css" href="vc-toggle-switch.css" />

How do I change its visual?

That sould be very simple, here's an example of a customized toggle:

  <div 
    style="
      --vc-off-color: blue;
      --vc-on-color: blue;
      --vc-on-font-color: red;
      --vc-off-font-color: red;
    "
    class="text-center d-inline-block"
  >
    <div class="vc-toggle-container">
      <label class="vc-switch">
        <input type="checkbox" class="vc-switch-input" />
        <span 
          data-on="Yes" 
          data-off="No"
          class="vc-switch-label"
        ></span>
        <span class="vc-handle"></span>
      </label>
    </div>
  </div>

As you can see, all you have to do is add the CSS properties you want to change in the style of the outermost main div.

Which properties can I change?

Background color when it's turned off
```
--vc-off-color
```
Background color when it's turned on
```
--vc-on-color
```
Animation speed and type
```
--vc-animation-speed
```
Font used by the text
```
--vc-font-family
```
The size used
```
--vc-font-size
```
The font weight
```
--vc-font-weight
```
Font color when the switch is on
```
--vc-on-font-color
```
Font color when the switch is off
```
--vc-off-font-color
```
How far the OFF text is from the right side
```
--vc-label-position-off
```
How far the ON text is from the left side
```
--vc-label-position-on
```
Small switch width
```
--vc-width
```
Small switch height
```
--vc-height
```
Border radius for the handle
```
--vc-handle-border-radius
```
Border radius for the box
```
--vc-box-border-radius
```
Shadow for the handle
```
--vc-handle-shadow
```
Handle color
```
--vc-handle-color
```
Handle width
```
--vc-handle-width
```
Handle height
```
--vc-handle-height
```
The handle's width while the toggle is clicked
```
--vc-onclick-width
```
Hadle's distance from the top
```
--vc-handle-top
```

You can find every property being used in the vc-toggle-switch.css file.

Where can I see this in action?

If you want to take a look at some working examples, you can check it here: https://vc-toggle.stackblitz.io

And if you want to play with it a little bit, take a look here: https://stackblitz.com/edit/vc-toggle?file=index.html

Note: Stackblitz is a little funky, and I couldn't make it load the CSS as an import. I recommend you downloading the project and playing a bit on yout own machine.

That's all, folks!

Please, take a moment to connect with me on Linkedin: https://linkedin.com/in/vinicius-chab/, and have a great day!

License

MIT - Vinícius Chab

ViniChab / VC-Toggle-Switch