Material Design 是 Google 推出的一种设计语言，旨在创造简洁、美观、易用的用户界面。Angular Material 是 Angular 框架的一个 UI 组件库，提供了一套符合 Material Design 规范的 UI 组件，可以帮助开发者快速构建 Material Design 风格的应用程序。
安装 Angular Material
要使用 Angular Material，首先需要安装它。可以使用 npm 安装，命令如下：
npm install @angular/material
安装完成后，需要在 Angular 的模块中引入 Angular Material，以便在应用程序中使用它。在 app.module.ts 文件中添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
------ - --------------- - ---- ---------------------------
------ - -------------- - ---- --------------------------
------ - ------------------ - ---- -------------------------------
------ - ------------ - ---- ------------------
-----------
------------- ---------------
-------- -
--------------
------------------------
----------------
---------------
-------------------
--
---------- ---
---------- ---------------
--
------ ----- --------- --这里我们引入了三个组件：MatButtonModule、MatInputModule、MatFormFieldModule。其中 MatButtonModule 是一个按钮组件，MatInputModule 是一个输入框组件，MatFormFieldModule 是一个表单组件。这些组件都符合 Material Design 规范，可以直接在应用程序中使用。
使用 Angular Material 组件
在引入了 Angular Material 后，就可以在应用程序中使用它提供的组件了。下面我们以一个登录页面为例，展示如何使用 Angular Material 组件快速构建 Material Design 风格的界面。
HTML 代码
-- -------------------- ---- -------
---- ------------------------
----------
-----------------
--------------------------------------
------------------
------------------
----------------
-------------------------------
------ -------- ------------------ ---- --------- --
-----------------
----------------
-------------------------------
------ -------- --------------- ------------------ ---- --------- --
-----------------
-------------------
------------------
------- --------------------------
------- ----------------- ------------------------------
-------------------
-----------
------这段 HTML 代码使用了 Angular Material 提供的组件，包括 mat-card、mat-card-header、mat-card-title、mat-card-content、mat-form-field、mat-label、mat-input、mat-card-actions、mat-button 和 mat-raised-button。这些组件都符合 Material Design 规范，可以直接使用。
CSS 代码
-- -------------------- ---- ------- ---------------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ - -------- - ------ ------ - -------------- - ------ ----- - ---------------- - -------- ----- ---------------- --------- -
这段 CSS 代码用于样式化登录页面，使其符合 Material Design 规范。其中 .login-container 是登录页面的容器，使用了 flex 布局使其垂直居中。mat-card 是一个卡片组件，使用了宽度为 400px，使其在页面中居中。mat-form-field 是一个表单组件，使用了宽度为 100%。mat-card-actions 是一个卡片操作组件，使用了 flex 布局使其靠右对齐。
TypeScript 代码
import { Component } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
})
export class LoginComponent {}这段 TypeScript 代码是 LoginComponent 组件的定义，将 HTML 和 CSS 代码与组件逻辑关联起来。
总结
Angular Material 是一个符合 Material Design 规范的 UI 组件库，可以帮助开发者快速构建 Material Design 风格的应用程序。在本文中，我们介绍了如何安装 Angular Material、使用 Angular Material 组件构建 Material Design 风格的登录页面，并提供了示例代码。希望本文对您有所帮助，让您更好地了解如何使用 Angular Material。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65541919d2f5e1655ddc6822