Materialize提供了一些开关, 以允许查看者在两个可用选项之间进行选择。通常, 开关是用于二进制状态(例如开/关或是/否或同意/不同意)的特殊复选框。
可以使用"开关"包装div内的类, 输入类型="复选框"。另一个必需的类是"杠杆"在<span>标记中使用。通过添加CSS元素, 可以根据选择修改开关。这是交换机的基本视图。
例子：
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel = "stylesheet" />
<!-- Compiled and minified CSS -->
<link rel = "stylesheet"
href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" />
<script type = "text/javascript"
src =
"https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</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 =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
</script>
</body>
</html>输出如下：
