Angular Bootstrap Switch
Angular Bootstrap switch is a simple component used for activating one of two predefined options. Commonly used as an on/off button.
It's mostly used in a number of various forms since they are dead simple to use and cut the time one needs to fill all the inputs.
Examples of Angular Bootstrap switch use:
- Forms
- On/Off Functionality
- Preference choice
See the following Angular Bootstrap switch examples:
Basic switch MDB Pro component
<!-- Switch -->
<div class="switch">
<label>
Off
<input type="checkbox">
<span class="lever"></span>
On
</label>
</div>
<!-- Disabled Switch -->
<div class="switch">
<label>
Off
<input disabled type="checkbox">
<span class="lever"></span>
On
</label>
</div>
Basic switch colors variations MDB Pro component
Add one of the following classes:
-
.primary-switch -
.secondary-switch -
.default-switch -
.info-switch -
.warning-switch -
.danger-switch -
.success-switch -
.blue-white-switch -
.teal-switch -
.pink-switch -
.amber-switch -
.blue-switch -
.indigo-switch -
.mdb-color-switch
.switch.primary-switch label input[type=checkbox]:checked + .lever {
background-color: #689DF6;
}
.switch.primary-switch label input[type=checkbox]:checked + .lever:after {
background-color: #4285F4;
}
.switch.default-switch label input[type=checkbox]:checked + .lever {
background-color: #4DCCBF;
}
.switch.default-switch label input[type=checkbox]:checked + .lever:after {
background-color: #2BBBAD;
}
.switch.secondary-switch label input[type=checkbox]:checked + .lever {
background-color: #C791E2;
}
.switch.secondary-switch label input[type=checkbox]:checked + .lever:after {
background-color: #a6c;
}
.switch.success-switch label input[type=checkbox]:checked + .lever {
background-color: #2ACC6C;
}
.switch.success-switch label input[type=checkbox]:checked + .lever:after {
background-color: #00C851;
}
.switch.info-switch label input[type=checkbox]:checked + .lever {
background-color: #59C3EB;
}
.switch.info-switch label input[type=checkbox]:checked + .lever:after {
background-color: #33b5e5;
}
.switch.warning-switch label input[type=checkbox]:checked + .lever {
background-color: #FFA339;
}
.switch.warning-switch label input[type=checkbox]:checked + .lever:after {
background-color: #F80;
}
.switch.danger-switch label input[type=checkbox]:checked + .lever {
background-color: #FF606F;
}
.switch.danger-switch label input[type=checkbox]:checked + .lever:after {
background-color: #ff3547;
}
.switch.teal-switch label input[type=checkbox]:checked + .lever {
background-color: #b2dfdb;
}
.switch.teal-switch label input[type=checkbox]:checked + .lever:after {
background-color: #80cbc4;
}
.switch.pink-switch label input[type=checkbox]:checked + .lever {
background-color: #f8bbd0;
}
.switch.pink-switch label input[type=checkbox]:checked + .lever:after {
background-color: #f48fb1;
}
.switch.blue-switch label input[type=checkbox]:checked + .lever {
background-color: #b3e5fc;
}
.switch.blue-switch label input[type=checkbox]:checked + .lever:after {
background-color: #81d4fa;
}
.switch.amber-switch label input[type=checkbox]:checked + .lever {
background-color: #ffe082;
}
.switch.amber-switch label input[type=checkbox]:checked + .lever:after {
background-color: #ffd54f;
}
.switch.mdb-color-switch label input[type=checkbox]:checked + .lever {
background-color: #618FB5;
}
.switch.mdb-color-switch label input[type=checkbox]:checked + .lever:after {
background-color: #3F729B;
}
.switch.indigo-switch label input[type=checkbox]:checked + .lever {
background-color: #9fa8da;
}
.switch.indigo-switch label input[type=checkbox]:checked + .lever:after {
background-color: #7986cb;
}
.switch.blue-white-switch label input[type=checkbox]:checked + .lever {
background-color: #2196f3;
}
.switch.blue-white-switch label input[type=checkbox]:checked + .lever:after {
background-color: #fff;
}
.switch.blue-white-switch label .lever {
background-color: #ccc;
}
.switch.blue-white-switch label .lever:after {
background-color: #fff;
}
Switch with different shapes MDB Pro component
Switch without labels
.switch.round label .lever {
width: 54px;
height: 34px;
border-radius: 10em;
}
.switch.round label .lever:after {
width: 26px;
height: 26px;
border-radius: 50%;
left: 4px;
top: 4px;
}
.switch.square label .lever {
width: 54px;
height: 34px;
border-radius: 0px;
}
.switch.square label .lever:after {
width: 26px;
height: 26px;
border-radius: 0px;
left: 4px;
top: 4px;
}
Switch within form MDB Pro component
API Reference:
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
API Reference for MDB Angular Switch:
// MDB Angular Pro
import { WavesModule, ButtonsModule, CardsFreeModule } from 'ng-uikit-pro-standard'// MDB Angular Free
import { WavesModule, ButtonsModule, CardsFreeModule } from 'angular-bootstrap-md'