Author: | justboil |
---|---|
Views Total: | 175 views |
Official Page: | Go to website |
Last Update: | March 10, 2023 |
License: | MIT |
Preview:

Description:
A CSS/SCSS extension for the Bulma framework that converts the regular checkboxes into switch controls with variable sizes and colors.
How to use it:
1. Download and import the stylesheet main.min.css into your Bulma framework.
<link rel="stylesheet" href="/path/to/cdn/bulma.min.css" /> <link rel="stylesheet" href="/path/to/css/main.min.css">
2. Add the required switch
class to checkbox’s label
and customize the switch using the following CSS classes:
- is-disabled: Set the state to OFF
- is-rounded: Rounded theme
- is-outlined: Outlined theme
- is-small: Small size
- is-medium: Medium size
- is-large: Large size
<label disabled class="switch is-disabled is-rounded is-large"> <input type="checkbox" value="false" disabled> <span class="check"></span> <span class="control-label">Disabled</span> </label>
3. Change the color of the switch control.
<span class="check is-info"></span> <span class="check is-success"></span> <span class="check is-danger"></span> <span class="check is-warning"></span>