Materialize provides switches to allow the viewer to select an option between the two available. Generally, switches are special checkboxes used for binary states such as on/off or yes/no or agree/disagree.
Switches can be created by using the “switch” class inside the wrapper div with the input type = “checkbox”. The other required class is “lever” that is used in the <span> tag. Switches can be modified according to ones choice by adding CSS elements. Here is the basic view of switch.
Example:
<!DOCTYPE html> < html >
< head >
<!--Import Google Icon Font-->
< link href =
rel = "stylesheet" />
<!-- Compiled and minified CSS -->
< link rel = "stylesheet" href =
< script type = "text/javascript" src =
< script src =
</ script >
<!--Let browser know website
is optimized for mobile-->
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0" />
</ head >
< body class = "container" >
< div class = "center" >
< h3 >Switches in materialize</ h3 >
</ div >
< div class = "card-panel green-text" >
< h4 class = "center" >Switch</ h4 >
<!-- Switch -->
< div class = "switch" >
< label >
Off
< input type = "checkbox" />
< span class = "lever" ></ span >
On
</ label >
</ div >
< br />
< div class = "switch" >
< label >
No
< input type = "checkbox" />
< span class = "lever" ></ span >
Yes
</ label >
</ div >
< br />
< div class = "switch" >
< label >
Disagree
< input type = "checkbox" />
< span class = "lever" ></ span >
Agree
</ label >
</ div >
</ div >
< div class = "card-panel green-text" >
< h4 class = "center" >Disabled Switch</ h4 >
< div class = "switch" >
< label >
Off
< input disabled type = "checkbox" />
< span class = "lever" ></ span >
On
</ label >
</ div >
< br />
< div class = "switch" >
< label >
No
< input disabled type = "checkbox" />
< span class = "lever" ></ span >
Yes
</ label >
</ div >
< br />
< div class = "switch" >
< label >
Disagree
< input disabled type = "checkbox" />
< span class = "lever" ></ span >
Agree
</ label >
</ div >
</ div >
<!-- Disabled Switch -->
<!-- Compiled and minified JavaScript -->
< script src =
</ script >
</ body >
</ html >
|
Output: