Material Design Lite Switches - Material Design Lite

What are Material Design Lite Switches?

The MDL switches provide various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of checkboxes as switches. Following table showcases the available classes and their effects.

S.N.
Class Name & Description
1
mdl-switch
Identifies label as an MDL component and is required on label element.
2
mdl-js-switch
Supports basic MDL behavior to label and is required on label element.
3
mdl-switch__input
Supports basic MDL behavior to switch and is required on input element (switch).
4/td>
mdl-switch__label
Supports basic MDL behavior to caption and is required on on i element (caption).
5
mdl-js-ripple-effect
Supports ripple click effect and is optional; goes on label element, not input element (switch).

Example

Below mentioned example explains the use of mdl-switch classes to show various types of checkboxes as switch.
mdl_switches.htm

Result

Verify the result.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Material Design Lite Topics