Material Design 是 Google 推出的一种设计语言，旨在为用户提供更好的用户体验。在前端开发中，Material Design 控件是必不可少的一部分。在本文中，我们将介绍必须掌握的 10 个 Material Design 控件，并提供详细的学习和指导意义。
1. 按钮 (Button)
按钮是 Material Design 中最常用的控件之一。它们用于触发操作，例如提交表单或导航到其他页面。按钮有许多不同的样式，包括平面、凸起和浮动按钮。下面是一个示例代码：
<button class="mdc-button">Submit</button>
2. 文本框 (Text Field)
文本框用于用户输入文本。它们可以用于登录表单、搜索表单等。Material Design 的文本框具有动态标签和浮动标签的功能。下面是一个示例代码：
<div class="mdc-text-field"> <input type="text" class="mdc-text-field__input" id="my-text-field"> <label class="mdc-floating-label" for="my-text-field">Label</label> <div class="mdc-line-ripple"></div> </div>
3. 单选框 (Radio Button)
单选框用于让用户从一组选项中选择一个选项。Material Design 的单选框使用圆形按钮表示选中状态。下面是一个示例代码：
-- -------------------- ---- -------
---- -----------------------
---- ------------------
------ --------------------------------- ------------ ------------ --------------
---- ------------------------------
---- --------------------------------------
---- --------------------------------------
------
------
------ -------------------- ---------
------4. 复选框 (Checkbox)
复选框用于让用户从一组选项中选择多个选项。Material Design 的复选框使用方形复选框表示选中状态。下面是一个示例代码：
-- -------------------- ---- -------
---- -----------------------
---- ---------------------
------ ------------------------------------ --------------- ----------------
---- ---------------------------------
---- ------------------------------- ---------- - -- ----
----- ------------------------------------ ----------- -------------- --------- -------------------
------
---- --------------------------------------
------
---- -----------------------------------
------
------ ----------------------- ---------
------5. 下拉菜单 (Dropdown)
下拉菜单用于显示一组选项，并且只有一个选项可以同时可见。Material Design 的下拉菜单使用文本框和下拉箭头来表示当前选项。下面是一个示例代码：
-- -------------------- ---- -------
---- -------------------
---- ---------------------------
------ ----------- ----------------------------------
-- --------------------------------------
---- ------------------------------
------
---- ----------------------- -------- ------------------
--- -----------------
--- --------------------- --------------------------- ------
--- --------------------- --------------------------- ------
-----
------
------6. 滑块 (Slider)
滑块用于让用户在一个范围内选择一个值。Material Design 的滑块使用一个滑块按钮和一个轨道来表示当前值。下面是一个示例代码：
-- -------------------- ---- -------
---- -------------------
---- ------------------------------------
---- --------------------------------
---- -------------------------------------------------
------
---- ------------------------------------
---- ------------------------
----- --------------------------------------------
------
---- ------------------------- ---------- ------------
------- --------- --------- -------------------
------
---- -------------------------------------
------
------7. 进度条 (Progress Bar)
进度条用于显示任务的进度。Material Design 的进度条使用一个轨道和一个进度条来表示当前进度。下面是一个示例代码：
-- -------------------- ---- -------
---- --------------------------- ------------------ ------------------- -------- ---- ----------------- ----------------- ------------------
---- --------------------------------------------------
---- ------------------------------------------
---- ------------------------------- ----------------------------------
----- ----------------------------------------------
------
---- ------------------------------- ------------------------------------
----- ----------------------------------------------
------
------8. 菜单 (Menu)
菜单用于显示一个选项列表。Material Design 的菜单使用一个按钮和一个选项列表来表示当前选项。下面是一个示例代码：
-- -------------------- ---- -------
------- ----------------- ------------------- ---------------
----
---------
---- --------------- ----------------- ------------- --------------------
--- ---------------- ----------- ------------------ ----------------------------
--- --------------------- --------------- ------------------- ------
--- --------------------- --------------- ------------------- ------
-----
------9. 卡片 (Card)
卡片用于显示内容，例如图片、文本等。Material Design 的卡片具有圆角和阴影的特点。下面是一个示例代码：
<div class="mdc-card">
<img src="path/to/image" class="mdc-card__media-item">
<div class="mdc-card__primary-action">
<div class="mdc-card__headline">Title</div>
<div class="mdc-card__subtitle">Subtitle</div>
<div class="mdc-card__body">Body</div>
</div>
</div>10. 对话框 (Dialog)
对话框用于显示一条消息或询问用户是否执行某个操作。Material Design 的对话框具有阴影和动画的特点。下面是一个示例代码：
-- -------------------- ---- -------
---- -------------------
---- ----------------------------
--- ------------------------------------
---- -----------------------------------------
------- ----------------------------
------- ------------- ----------------- ------------------- -----------------------------------------------
------- ------------- ----------------- ------------------- -----------------------------------------------
---------
------
---- --------------------------------
------总结
在本文中，我们介绍了必须掌握的 10 个 Material Design 控件，并提供了详细的学习和指导意义。这些控件是前端开发中必不可少的一部分，可以帮助您提供更好的用户体验。希望这篇文章能够对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655eb493d2f5e1655d8d8f16