MDL : Switch
How to use MDL - Material Design Lite to create Switches
Material Design Lite (MDL) : Switches
Material Design Lite(MDL) component switch is used to create an switch which is an enhanced version of HTML5 checkbox
The Visual appearance of the Switch is a short horizontal track with the circle that can be slided on either sides to denote the states(binary) of the switch.
Radio Buttons generally appears in a groups and selections can also be made on individual basis, MDL Radio buttons have the typical click effects.
Similar to Checkboxes and Radio Buttons, switches too are used in groups, and can be selected and unselected individually as well.
The Visual Appearance of the Switch is far better than a normal checkbox hence enhancing the User Experience, the color of switch changes when in selected state, typical MDL click effects can also be added.
Material Design Lite(MDL) : Basic Switches
A MDL switch can be created using mdl-switch to create a container to hold switch related content.
To Create a icon toggle use input element with attribute type="checkbox", the attribute check is used to keep the switch in selected state by default.
Example: Material Design Lite (MDL) : Basic SwitchesGive it a TRY! » Note:The value of the id attribute must be same as for attribute
Material Design Lite : Radio Button Classes
|mdl-switch||To create a MDL switch container|
|mdl-js-switch||To Assign MDL behaviour to switch|
|mdl-switch__input||To create a switch with basic MDL Features|
|mdl-switch__label||To Create a Label for switch|
|mdl-js-ripple-effect||To apply a ripple effect when clicked|