随着前端技术的发展，越来越多的人开始注重界面的美观和易用性。Angular Material 2 是一个基于 Angular 框架的 UI 组件库，它提供了一系列的组件和样式，可以帮助我们快速构建优雅的 UI 界面。
安装 Angular Material 2
在使用 Angular Material 2 之前，我们需要先安装它。可以通过以下命令来安装：
npm install --save @angular/material @angular/cdk @angular/animations
其中，@angular/material 是 Angular Material 2 的核心库，@angular/cdk 是 Angular 的 Component Development Kit，提供了一些常用的基础组件和工具，@angular/animations 是 Angular 的动画库，可以让我们方便地添加动画效果。
使用 Angular Material 2
安装完成后，我们需要在 app.module.ts 中引入并注册 Angular Material 2 的组件和样式。可以通过以下代码来实现：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
------ - --------------- - ---- ---------------------------
------ - ------------- - ---- -------------------------
------ - ------------- - ---- -------------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------
----------------
--------------
-------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在上述代码中，我们引入了三个 Angular Material 2 的组件：MatButtonModule、MatIconModule 和 MatMenuModule，它们分别对应了按钮、图标和菜单这三个常用的 UI 组件。同时，我们也需要引入 BrowserAnimationsModule 来支持动画效果。
使用 Angular Material 2 的组件非常简单，只需要在 HTML 中使用对应的标签即可。以下是一个简单的示例：
-- -------------------- ---- ------- ------- ---------------- ------------ ------------------------- --------- ---------------- ------- ------------------ ---------- ------- ------------------ ---------- ------- ------------------ ---------- ----------- ------- --------------- --------------------------- ------------------------------ ---------
在上述代码中，我们使用了三个 Angular Material 2 的组件：mat-button、mat-icon 和 mat-menu，它们分别对应了按钮、图标和菜单。通过 mat-menu-item 可以定义菜单项，通过 mat-icon-button 和 [matMenuTriggerFor] 可以定义触发菜单的按钮。
自定义主题
Angular Material 2 提供了一些预设的主题，可以通过在 styles.scss 中引入对应的样式来使用。例如，可以通过以下代码来使用 Indigo-Pink 主题：
@import '~@angular/material/theming'; @include mat-core(); $primary: mat-palette($mat-indigo); $accent: mat-palette($mat-pink, A200, A100, A400); $theme: mat-light-theme($primary, $accent); @include angular-material-theme($theme);
如果想要自定义主题，也可以通过修改 $primary、$accent 等变量来实现。例如，以下是一个自定义主题的示例：
-- -------------------- ---- ------- ------- ----------------------------- -------- ----------- --------- ---------------------- ---- ---- ----- -------- ------------------------ ---- ---- ----- ------ --------------------- ---- ---- ----- ------- ------------------------- -------- ------- -------- -------------------------------
在上述代码中，我们定义了 $primary、$accent 和 $warn 三个变量，分别对应了主色、强调色和警告色。通过 mat-palette 函数可以定义一个调色板，其中的参数分别对应了主色、浅色、深色和文字颜色。最后，通过 mat-light-theme 函数可以定义一个主题，其中的参数分别对应了主色、强调色、警告色和样式。
总结
使用 Angular Material 2 可以帮助我们快速构建优雅的 UI 界面。在本文中，我们介绍了如何安装和使用 Angular Material 2，以及如何自定义主题。希望本文对大家学习和使用 Angular Material 2 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656d4b94d2f5e1655d597941