Angular Material 是一个用于构建 Web 应用程序的 UI 组件库，它基于谷歌的 Material Design 设计原则。使用 Angular Material 可以帮助开发者更方便、更快速地创建美观的界面。本文将介绍如何在 Angular 中使用 Angular Material。
步骤
- 安装依赖
在使用 Angular Material 前，需要安装一些依赖。
npm install --save @angular/material @angular/cdk @angular/flex-layout @angular/animations
其中，@angular/material 是主要的 Angular Material 模块，@angular/cdk 包含了 Angular Material 组件所需的通用服务，@angular/flex-layout 是一个响应式 UI 框架，允许创建可响应的布局。@angular/animations 是 Angular 的动画库。
- 在 angular.json 中配置样式
在项目的 angular.json 文件中，需要将 Angular Material 的样式文件和主题文件添加到 styles 数组中。
"styles": [
"src/styles.css",
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
]这里使用了 indigo-pink 样式主题，可以选择其他主题。
- 导入模块
在需要使用 Angular Material 的模块中，需要导入 MatIconModule、MatToolbarModule、MatButtonModule 等模块。例如：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -------------------------
------ - ---------------- - ---- ----------------------------
------ - --------------- - ---- ---------------------------
-----------
-------- -
------------
-------------
--------------
-----------------
---------------
--
-------- -
------------
-------------
--------------
-----------------
---------------
-
--
------ ----- ------------ - -这里导入了 MatIconModule、MatToolbarModule 和 MatButtonModule 模块，并添加到了 imports 和 exports 数组中，以便在使用时能够正常引用。
组件使用示例
Button
Angular Material 的 MatButton 组件可以用来创建各种类型的按钮。例如：
<button mat-raised-button color="primary">Primary</button> <button mat-raised-button color="accent">Accent</button> <button mat-raised-button color="warn">Warn</button>
Toolbar
MatToolbar 组件可以用来创建页面顶部的工具栏。例如：
<mat-toolbar color="primary">
<span>My Application</span>
<span class="spacer"></span>
<a mat-button>Home</a>
<a mat-button>About</a>
</mat-toolbar>其中，.spacer 是一个 CSS 类，用来让工具栏中的元素居中对齐。
.spacer {
flex: 1 1 auto;
}Icon
Angular Material 的 MatIcon 组件可以用来添加各种 Material icons。例如：
<mat-icon>home</mat-icon>
Card
MatCard 组件可以用来创建卡片式布局。例如：
-- -------------------- ---- -------
----------
-----------------
-------------------- ----------------------
------------------
------------------
------- -----------
-------------------
------------------
------- ------------------------
------- -------------------------
-------------------
-----------结论
本文介绍了如何在 Angular 中使用 Angular Material。通过使用 Angular Material，可以帮助开发人员更快速地创建美观的 Web 应用程序。希望本文能够对您开发 Web 应用程序时的工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6771032a6d66e0f9aacb0bdd