作为一名前端工程师，开发 UI 界面是我们日常工作的一部分。传统的开发方式需要自己手写 CSS 样式，使用 jQuery 等常用库来操作 DOM 元素。这种方式虽然灵活，但也存在着诸多不足之处，比如开发效率低、兼容性等问题。现在，随着 Material Design 框架的兴起，我们可以使用它来快速开发UI 界面。
什么是 Material Design 框架？
Material Design 是一种 以纸和墨水为设计基础的前端框架，由谷歌设计师推出。它是为了提高用户体验而专门设计的，旨在使移动页面和应用程序的设计更具高质量的规范性和可见性。
Material Design 框架的特点：
- 高度可定制。
- Material 风格，突出视觉效果。
- 使用简单且易于理解的语言构建应用。
- 组件丰富，功能强大。
- 兼容性较好。
快速上手 Material Design
要想使用 Material Design，我们必须引入 Material Design 的核心文件。推荐使用官方提供的 CDN 引入：
<!-- Material Design 核心文件 --> <link rel="stylesheet" href="https://unpkg.com/material-design-icons@3.0.1/iconfont/material-icons.css"> <link rel="stylesheet" href="https://unpkg.com/material-components-web@3.3.0/dist/material-components-web.min.css"> <!-- 引入 JavaScript 文件 --> <script src="https://unpkg.com/material-components-web@3.3.0/dist/material-components-web.min.js"></script>
在引入文件后，我们就可以开始在项目中使用 Material Design 了。
Material Design 组件
Button 按钮
Button 按钮是最常用的 Material Design 组件之一，定义了多种样式和主题。我们可以使用以下代码来创建一个按钮：
<button class="mdc-button">按钮</button>
Text field 文本框
Text field 文本框可以用于输入，它具有多种样式。我们可以使用以下代码来创建一个文本框：
<div class="mdc-text-field"> <input type="text" class="mdc-text-field__input" id="my-textfield"> <label class="mdc-text-field__label" for="my-textfield">文本框</label> <div class="mdc-line-ripple"></div> </div>
Checkbox 多选框
Checkbox 多选框是选择项目的另一种方式。我们可以使用以下代码来创建一个多选框：
-- -------------------- ---- -------
---- ---------------------
------ ---------------
------------------------------------
-----------------
---- ---------------------------------
---- ------------------------------- ---------- - -- ----
----- ------------------------------------
-----------
--------------
-------------- --------- -------------
------
---- --------------------------------------
------
------
------ -----------------------------Snackbar 通知栏
Snackbar 通知栏可以用于向用户显示一条临时的消息。我们可以使用以下代码来创建一个 Snackbar：
-- -------------------- ---- -------
---- -------------------- --------------------- ------------------ -------------------
---- ------------------------------
---- --------------------------- ------------- -------------------
----
------
---- ------------------------------
------- ----------------- ---------------------------------
------
------
------总结
Material Design 框架为我们开发UI 界面提供了强有力的支持，使得开发效率和网站表现都有所提高。在使用 Material Design 框架的过程中，我们可以通过引入 CSS 和 JavaScript 等核心文件，通过组件的方式快速构建需要的 UI 界面。最后，快速开发的将会成为前端工程师的一个必备技能，Material Design 框架则是其中的一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a70e948841e989489302f