Angular Material 是一个 Angular 应用程序的 UI 框架，由 Google 团队开发和维护。它提供了一套美观、响应式的组件和样式来快速搭建现代化的 Web 应用程序。本篇文章将介绍 Angular Material 的基本概念和使用方式，帮助读者快速入门。
安装和配置
在使用 Angular Material 之前，需要先安装 Angular CLI。在安装完成后，可以通过以下命令安装 Angular Material：
npm install --save @angular/material @angular/cdk @angular/animations
接着，在项目中的 app.module.ts 中添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
------ - ---------------- - ---- ----------------------------
------ - --------------- - ---- ---------------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------
-----------------
---------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -以上代码中，我们引入了 BrowserAnimationsModule 和 MatToolbarModule、MatButtonModule 等模块，用于向应用程序中添加动画效果和 Material 模块。
使用组件
接下来，我们将使用 MatToolbar 和 MatButtonModule 组件来构建一个简单的工具栏和按钮。在 app.component.html 中添加以下代码：
<mat-toolbar color="primary"> <span>My App</span> <button mat-button>About</button> </mat-toolbar>
我们可以看到，工具栏被定义为 mat-toolbar 元素，还定义了一个颜色为 primary。紧随其后的是一个按钮，用于跳转到关于页面。这个按钮使用了 mat-button 类，实现了与其他 Material 组件的一致性。
现在，当我们启动应用程序时，将看到如下效果：
样式和主题
Angular Material 为每个组件定义了一套默认的样式，但我们也可以根据需要自定义样式。默认情况下，Angular Material 使用的是 Indigo-Pink 主题，但使用 @angular/material/prebuilt-themes 中的其他主题：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
------ - ---------------- - ---- ----------------------------
------ - --------------- - ---- ---------------------------
------ - ------------- - ---- -------------------------
------ - ------------- - ---- -------------------------
------ - ------------- - ---- -------------------------
------ - ------------- - ---- -------------------------
------ - ------------- - ---- -------------------------
------ - ----------------- - ---- ------------------------------
------ - -------------- - ---- --------------------------
------ - ------------------ - ---- -------------------------------
------ - --------------- - ---- ---------------------------
------ - ---------------- - ---- ----------------------------
------ - ----------------- - ---- -----------------------------
------ - ------------ - ---- ------------------
-- ---------
------ - --------------- - ---- ---------------------------
------ - ------------------------- - ---- --------------------------
------ - ----------- - ---- -----------------
-- ---------
------ - ------------------- - ---- -------------------------
------ - ------------------- - ---- -------------------------------
------ - -------------- - ---- --------------------------
------ - ---------------- - ---- ----------------------------
------ - -------------- - ---- --------------------------
------ - ------------------ - ---- ------------------------------
------ - ------------- - ---- -------------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------
------------
-----------------
----------------
--------------
--------------
--------------
--------------
--------------
------------------
---------------
-------------------
----------------
-----------------
------------------
-- ---------
----------------
--------------------
--------------------
---------------
-----------------
---------------
-------------------
-------------
--
---------- -
-- ---------
-
-------- --------------------------
--------- - ------ --------- -
-
--
---------- --------------
--
------ ----- --------- - -上面的代码中，我们添加了大量的 Material 组件，包括 MatCard、MatIconModule、MatTabs、MatList 等。我们还引入其他主题时使用的 MatNativeDateModule、MatDatepickerModule、MatRadioModule 等。
总结
Angular Material 提供了丰富的组件和样式，快速搭建现代化的 Web 应用程序。在这篇文章中，我们了解了 Angular Material 的基本概念和使用方法，包括安装和配置、使用组件和样式和主题。希望读者通过这篇快速入门，可以尽快掌握 Angular Material 的基本用法，快速开发适合自己的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f1afd968c7c53b01339f9