介绍
Material Design 是一种由谷歌推出的设计语言，它极大地影响了当今设计领域的潮流。在前端开发中，使用 Material Design 风格的设计可以使得网站或应用变得更加美观、整洁和易于使用。
本文将介绍 Material Design 中的选项和分类实现方式，并且将提供具体示例代码以帮助您更好地理解和实践这些方法。
选项
Material Design 中的选项 （Option）表示具有两个或更多个状态的表单元素，例如复选框 （Checkbox）和单选按钮（Radio Buttons）
复选框
复选框可以允许用户同时选择多个选项。在 Material Design 中，复选框使用了一种简洁而方便的实现方式。
使用以下示例代码来创建一个复选框。
<label> <input type="checkbox"> <span>选项</span> </label>
在这个代码中，<input> 标签定义了复选框本身，而 <label> 标签用于绑定复选框与其识别文本。在 Material Design 中，复选框的选中状态由CSS所控制。
input[type="checkbox"]:checked+span::before {
content: "\e5ca";
color: #1E88E5;
}在这里，我们使用了 伪模拟器（pseudo-selector）来设置复选框的不同状态。当复选框被选中时，会添加一个文本节点来作为符号，这个符号是通过 CSS content 属性来生成的。
单选按钮
单选按钮允许用户在一组互斥的选项中选择一个选项。在 Material Design 中，单选按钮同样使用了一种简洁而方便的实现方式。
使用以下示例代码来创建一个单选按钮。
<label> <input type="radio" name="option"> <span>选项</span> </label>
在这个代码中，<input> 标签用于定义单选按钮本身，name属性用于定义单选按钮所在的组别。 <label> 标签用于绑定单选按钮与其识别文本。 在Material Design 中，单选按钮的选中状态由CSS所控制。
input[type="radio"]:checked+span::before {
content: "\e837";
color: #1E88E5;
}在这里，我们使用了伪模拟器（pseudo-selector）来设置单选按钮的不同状态。当单选按钮被选中时，会添加一个文本节点作为符号，这个符号是通过 CSS content 属性来生成的。
分类
Material Design 中的分类（Tab）表示可以按照类别进行组织，并且在不同类别之间进行切换的元素。分类是一种非常常见的导航模式，并且 Material Design 为其提供了非常方便的实现方式。
分类
使用以下示例代码来创建分类。
<div class="tabs"> <div class="tab">标签页 1</div> <div class="tab">标签页 2</div> <div class="tab">标签页 3</div> </div>
在这个代码中，<div class="tabs">定义了分类整体的容器， <div class="tab">则定义了每一个分类的单独项。可以通过 CSS 来设置每一个分类项之间的间距，并定义当前活动项下方的底部横线。
-- -------------------- ---- ------- ----- - -------- ----- ---------------- -------------- ------------ ------- - ---- - -------- ----- -------------- --- ----- ----- - ----------- - -------------------- -------- ------------ ----- -
分类内容
使用以下示例代码来创建分类内容。
<div class="tab-content"> <div class="tab-pane active"></div> <div class="tab-pane"></div> <div class="tab-pane"></div> </div>
在这个代码中，<div class="tab-content"> 定义了分类内容的容器， <div class="tab-pane">定义了每一个分类的内容。其中，active 类用于表示默认选中的分类项。
可以通过 CSS 来设置分类内容的样式，可以使用 display 属性来控制不同分类在不同时间点显示或隐藏。
.tab-content .tab-pane {
display: none;
}
.tab-content .active {
display: block;
}通过在分类容器中设置一个被命名为 active 类的初始值，您将能够显示默认显示的分类内容。
总结
本文介绍了 Material Design 中的选项和分类实现方式，并且提供了具体的示例代码。复选框和单选按钮使用了 CSS 样式控制选中状态的方式，分类使用了两个容器来分别控制分类和分类内容。
以上实现方式是 Material Design 中非常方便且受欢迎的方式，希望能够对您的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649f813648841e9894bda2bd