Material Design 是一种由 Google 推出的设计语言，它强调简单、直观和具有层次感的设计风格。在前端开发中，我们经常需要使用各种图标型控件来实现这种设计风格。本文将介绍如何使用 Material Design 中的图标来封装常用的控件，并提供示例代码。
什么是图标型控件？
图标型控件是指使用图标来表示某个功能或操作的控件。在 Material Design 中，图标型控件是实现简洁、直观和易于操作的关键。常见的图标型控件包括按钮、菜单、标签、复选框、单选框等。
Material Design 中的图标
Material Design 中提供了丰富的图标库，包括系统图标、应用图标、动作图标、导航图标、通知图标等。这些图标都是矢量图标，可以随意缩放而不失真。我们可以使用这些图标来实现各种图标型控件。
如何使用 Material Design 图标
在使用 Material Design 图标时，我们可以通过引入 Google 的 Material Icons 字体文件来实现。具体步骤如下：
在 HTML 文件中引入 Material Icons 字体文件：
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">在需要使用图标的地方，使用以下代码：
<i class="material-icons">icon_name</i>
icon_name 是需要使用的图标名称，可以在 Material Icons 官网 上查找。例如，如果需要使用一个叫做 add 的图标，可以使用以下代码：
<i class="material-icons">add</i>
Material Design 图标的优点
Material Design 图标的优点在于它们具有以下几个特点：
- 矢量图标，可以随意缩放而不失真。
- 多种颜色和大小可供选择。
- 通过语义化的图标名称，使得开发者可以更容易地理解和使用这些图标。
如何封装常用图标型控件
下面我们将介绍如何封装常用的图标型控件，包括按钮、菜单、标签、复选框和单选框。
按钮
按钮是最常见的图标型控件之一。我们可以使用 Material Design 中的图标来实现不同风格的按钮，包括带有图标的按钮、带有文本和图标的按钮、带有浮动标签的按钮等。
以下是一个带有图标的按钮的示例代码：
<button class="md-button"> <i class="material-icons">search</i> </button>
以下是一个带有文本和图标的按钮的示例代码：
<button class="md-button"> <i class="material-icons">add</i> Add </button>
以下是一个带有浮动标签的按钮的示例代码：
<button class="md-button md-fab"> <i class="material-icons">add</i> <span class="md-label">Add</span> </button>
菜单
菜单是另一个常见的图标型控件。我们可以使用 Material Design 中的图标来实现不同风格的菜单，包括下拉菜单、卡片式菜单、浮动操作按钮菜单等。
以下是一个下拉菜单的示例代码：
<button class="md-button md-icon-button" aria-label="More"> <i class="material-icons">more_vert</i> </button> <ul class="md-menu"> <li><a href="#">Menu item 1</a></li> <li><a href="#">Menu item 2</a></li> <li><a href="#">Menu item 3</a></li> </ul>
以下是一个卡片式菜单的示例代码：
-- -------------------- ---- -------
------- ---------------- --------------- ------------------
-- ------------------------------------
---------
---- ----------------
--- ----------------
------ ------------- ---- ----------
------ ------------- ---- ----------
------ ------------- ---- ----------
-----
------以下是一个浮动操作按钮菜单的示例代码：
-- -------------------- ---- -------
---- -----------------------
------- ------------- ----------- ---------------------
-- ------------------------------
---------
---- --------------- ------------ -------------
---- -------------------
--------- -----------
--- ----------------
------ ------------- ---- ----------
------ ------------- ---- ----------
------ ------------- ---- ----------
-----
------
------
------标签
标签是用于分类或标记的图标型控件。我们可以使用 Material Design 中的图标来实现不同风格的标签，包括文本标签、图标标签、带有删除按钮的标签等。
以下是一个文本标签的示例代码：
<span class="md-label">Label</span>
以下是一个图标标签的示例代码：
<i class="material-icons md-icon-label">label</i>
以下是一个带有删除按钮的标签的示例代码：
<div class="md-chip">
<span class="md-label">Label</span>
<button class="md-delete">
<i class="material-icons">cancel</i>
</button>
</div>复选框
复选框是用于多选的图标型控件。我们可以使用 Material Design 中的图标来实现不同风格的复选框，包括带有文本的复选框、带有图标的复选框等。
以下是一个带有文本的复选框的示例代码：
<label class="md-checkbox"> <input type="checkbox"> Checkbox </label>
以下是一个带有图标的复选框的示例代码：
<label class="md-checkbox md-icon-checkbox"> <input type="checkbox"> <i class="material-icons">check_box_outline_blank</i> <i class="material-icons md-checked">check_box</i> </label>
单选框
单选框是用于单选的图标型控件。我们可以使用 Material Design 中的图标来实现不同风格的单选框，包括带有文本的单选框、带有图标的单选框等。
以下是一个带有文本的单选框的示例代码：
<label class="md-radio"> <input type="radio" name="radio-group"> Radio </label>
以下是一个带有图标的单选框的示例代码：
<label class="md-radio md-icon-radio"> <input type="radio" name="radio-group"> <i class="material-icons">radio_button_unchecked</i> <i class="material-icons md-checked">radio_button_checked</i> </label>
总结
本文介绍了如何使用 Material Design 中的图标来封装常用的图标型控件，包括按钮、菜单、标签、复选框和单选框。通过使用 Material Design 中的图标，我们可以实现简洁、直观和易于操作的设计风格。希望本文对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6512b19195b1f8cacdb342e4