介绍
在前端开发中，使用好的 UI 库是非常关键的。而 Google 推出的 Material Design 就是非常优秀的一个 UI 设计规范，让用户可以创造美好的体验，而 material-design-web 就是一个基于这个规范的 UI 库，提供了多种 UI 组件以及样式。
在本篇文章中，我们将教大家如何使用 npm 包 material-design-web，以及如何在项目中使用这个 UI 库。
安装 material-design-web
使用 npm 包管理器，可以轻松地安装 material-design-web 包。
npm install --save material-design-web
安装完成后，你可以在项目的 node_modules 目录下看到 material-design-web 的代码。
使用 material-design-web
引入 CSS 文件
在使用 material-design-web 之前，需要先引入它的 CSS 文件。在 HTML 文件中添加以下代码：
<link rel="stylesheet" href="./node_modules/material-design-web/dist/material-design-web.min.css">
引入 JavaScript 文件
在 HTML 文件底部添加 JavaScript 文件：
<script src="./node_modules/material-design-web/dist/material-design-web.min.js"></script>
使用组件
material-design-web 提供了多种 UI 组件，如按钮、表格、卡片等等。我们可以使用这些组件来构建我们的界面。
按钮组件
material-design-web 的按钮组件非常实用，它提供了多种样式，而且非常易于使用。我们可以在 HTML 中添加以下按钮：
<button class="mdc-button">Default</button> <button class="mdc-button mdc-button--raised">Raised</button> <button class="mdc-button mdc-button--outlined">Outlined</button> <button class="mdc-button mdc-button--unelevated">Unelevated</button>
其中 mdc-button 为默认样式，mdc-button--raised 为凸起样式，mdc-button--outlined 为轮廓样式，mdc-button--unelevated 为平面样式。
表格组件
material-design-web 的表格组件非常灵活，可以方便地自定义表格样式、添加数据等等。我们可以在 HTML 中添加以下表格：
-- -------------------- ---- -------
------ -----------------------
-------
--- -----------------------------------
--- -------------------------------------------------
--- ---------------------------------------------
--- -------------------------------------------
--- ---------------------------------- --------------------------------------------
--- ---------------------------------- --------------------------------------------
--- ---------------------------------- --------------------------------------------
--- ---------------------------------- ---------------------------------------------
--- ---------------------------------- ---------------------------------------------
--- ---------------------------------- ---------------------------------------------
--- ---------------------------------- -------------------------------------------------
-----
--------
------ --------------------------------
--- ----------------------------
--- -----------------------------------
--- -------------------------------------------
--- ------------------------------------
--- --------------------------- --------------------------------------
--- --------------------------- -------------------------------------
--- --------------------------- -------------------------------------
--- --------------------------- --------------------------------------
--- --------------------------- --------------------------------------
--- --------------------------- ---------------------------------------
--- --------------------------- --------------------------------------
-----
--- ----------------------------
--- -----------------------------------
--- --------------------------------------- ---------
--- ------------------------------------
--- --------------------------- --------------------------------------
--- --------------------------- -------------------------------------
--- --------------------------- -------------------------------------
--- --------------------------- ---------------------------------------
--- --------------------------- --------------------------------------
--- --------------------------- ---------------------------------------
--- --------------------------- --------------------------------------
-----
--------
--------卡片组件
material-design-web 的卡片组件非常适合用来展示一些简单的信息，比如博客列表、产品介绍等等。我们可以在 HTML 中添加以下卡片：
-- -------------------- ---- -------
---- -----------------
---- -------------------------------- -------------
---- ---------------------- ---------------------- ------------------------ ------------------------
------
---- --------------------------
--- ---------------------- ----------------------------- ---- ---------
--- ----------------------------------- ---------
------
---- -------------------------- -----------------------
----- ----- ----- --- ----- ----------- ---------- ----- --- -- ------- ------ ---------- -- ------ -- ------ ----- -------
------
------
---- --------------------------
---- ---------------------------------
------- ----------------- ---------------- -------------------------------- ----------
------- ----------------- ---------------- -------------------------------- ----------
------
---- -------------------------------
------- ---------------------- ---------------- ----------------------- -------------------- --------------- -- ---------- ---------- -- -----------
-- --------------------- --------------------- ---------------------------------------
-- --------------------- ------------------------------------------
---------
------- ---------------------- -------------- ---------------- ----------------------- -------------------- ------------------ ----------------------------
------- ---------------------- -------------- ---------------- ----------------------- -------------------- ---------------- -------- ----------- ---------------------------
------
------
------总结
通过本篇文章的学习，我们了解了如何安装、引入和使用 npm 包 material-design-web，以及如何使用它来构建 UI 界面。在实际项目中，我们可以通过使用 material-design-web，来让我们的界面更加美观和易于使用，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fe381e8991b448dd7ff