Angular Material 是由 Angular 团队维护的一套 UI 组件库，提供了许多常见的 UI 组件和交互效果。在本文中，我们将学习如何使用 npm 包 angular-material 来快速构建具有现代感的界面。
安装 Angular Material
首先，我们需要安装 angular-material。打开终端，进入你的项目目录，运行以下命令：
npm install angular-material
这会下载并安装最新版本的 angular-material 包及其依赖项。
导入样式和组件
导入 Angular Material 的样式表是必要的。打开项目的 styles.css 文件，并添加以下内容：
@import "~angular-material/angular-material.css";
接下来，在你的模块文件（app.module.ts）中导入所需的组件和模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
------ - --------------- - ---- ---------------------------
------ - ------------- - ---- -------------------------
------ - ------------ - ---- ------------------
-----------
------------- ---------------
-------- -
--------------
------------------------
----------------
--------------
--
---------- ---
---------- ---------------
--
------ ----- --------- --在上述代码中，我们导入了 MatButtonModule 和 MatIconModule，这些是 Angular Material 中的两个常用组件。
使用组件
在导入所需组件后，我们可以在 HTML 模板中使用它们了。以下为一个简单的示例：
<button mat-raised-button color="primary"> <mat-icon>add</mat-icon> Add Item </button>
这将创建一个带有“Add Item”文本和加号图标的凸起按钮，其颜色为主要颜色。
结论
在本文中，我们学习了如何使用 npm 包 angular-material 来构建可靠的用户界面。通过导入样式表和模块并使用组件，您可以快速轻松地创建具有现代感的界面。如果您想深入了解 Angular Material 的更多功能，请查看其文档。
希望这个指南对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36356