Material Design 是由 Google 推出的一种设计风格，它将设计和交互元素组合到一个统一、美观和易于使用的系统中。Angular Material 是一个用于 Angular 应用程序的 UI 库，它集成了许多基于 Material Design 的 UI 组件。在本文中，我们将介绍如何在 Angular 应用程序中集成 Material Design 组件。
安装 Angular Material
在开始之前，请确保您的 Angular 应用程序已正确设置和运行。您可以通过以下命令在 Angular 应用程序中安装 Angular Material：
ng add @angular/material
使用以上命令，AngularCLI会帮我们完成依赖安装以及其他的初始化工作，不用担心官网的一些问题，非常方便。
引入 Material 组件
在已安装 @angular/material 之后，您需要在应用程序的入口文件（通常是 app.module.ts）中引入所需的组件和模块。以下是一个示例代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
------ - ---------------- - ---- ----------------------------
------ - ---------------- - ---- ----------------------------
------ - ------------- - ---- -------------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------
-----------------
-----------------
-------------
--
---------- --------------
--
------ ----- --------- - -在上面的代码中，我们使用 MatToolbarModule、MatSidenavModule 和 MatIconModule 模块来引入 Material Design 的工具栏、侧边栏和图标组件。
使用 Material 组件
现在，我们已经成功地将 Material Design 组件引入到 Angular 应用程序中，接下来看一下如何在代码中使用这些组件。
工具栏组件
<mat-toolbar color="primary"> <span>My Application</span> </mat-toolbar>
在上面的代码中，我们使用 mat-toolbar 组件来创建一个 Material Design 的工具栏，设置了一个 Primary 的背景色，里面包含简单的文本内容。
侧边栏组件
-- -------------------- ---- -------
-----------------------
------------ -------- ------------
--------------
-- ------------- -----------------------
-- ------------- -----------------------------
-- ------------- ---------------------------------
---------------
--------------
---------------------
-------------------------------
----------------------
------------------------在上面的代码中，我们使用 mat-sidenav-container 容器来包含两个子元素：一个是 mat-sidenav 组件，用来显示导航菜单；另一个是 mat-sidenav-content 组件，用来显示主要内容。mat-nav-list 组件是用于显示菜单项列表的组件。
图标组件
<button mat-icon-button> <mat-icon>menu</mat-icon> </button>
在上面的代码中，我们使用 mat-icon-button 和 mat-icon 组件来创建一个 Material Design 风格的图标按钮，其中的 menu 参数表示所需的图标名称。
总结
在本文中，我们介绍了如何在 Angular 应用程序中集成 Material Design 组件，并演示了如何在代码中使用这些组件。虽然部署时会带有额外的导入，但对于想要创建符合 Material Design 风格的现代 Web 应用程序的开发者，这些组件提供了便捷的方式来快速构建高品质的用户界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465db47968c7c53b0685819