如何在 Angular 项目中使用 Material Design？-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是 Google 推出的一种设计语言。它具有可读性、美观性和易用性，非常适用于构建 Web 应用程序。Angular 是一个用于构建单一页面应用程序的开源平台。与 Material Design 结合使用，可以帮助我们创建出更好的 Web 应用。

在本文中，我们将介绍如何在 Angular 项目中使用 Material Design。

步骤 1 - 安装 Angular Material

在使用 Angular Material 之前，您需要将其添加到项目中。要安装 Angular Material，请在项目中运行以下命令：

ng add @angular/material

步骤 2 - 导入 Angular Material 模块

在安装后，您需要将要使用的 Angular Material 模块导入到项目中。例如，如果您想使用按钮和输入框组件，则需要导入 MatButtonModule 和 MatInputModule 模块。您可以通过按如下方式导入这些模块：

import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';

步骤 3 - 添加 Material Design 样式表

默认情况下，Angular Material 将不会为您的应用程序添加样式表。您需要手动将它们添加到您的项目中。要添加 Material Design 样式表，请在您的 index.html 文件中添加以下代码：

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

步骤 4 - 在组件中使用 Angular Material 组件

一旦您已经将 Angular Material 添加到了相关模块中，您可以在任意组件中使用它。例如，下面的代码演示了如何在组件中使用 MatButton 和 MatInput 元素：

<button mat-raised-button>简单按钮</button>

<mat-form-field>
  <mat-label>用户名</mat-label>
  <input matInput>
</mat-form-field>

MatButton 是一个使用 Material Design 样式定制的按钮，而 MatInput 是一个使用 Material Design 样式定制的输入框。

步骤 5 - 建立响应式模板

使用 Angular Material 可以轻松地为不同设备类型创建响应式模板。例如，您可以使用 MatGridList 组件创建不同屏幕大小下的瀑布流布局。下面是 MatGridList 的简单示例：

<mat-grid-list cols="3" rowHeight="2:1" gutterSize="10px">
  <mat-grid-tile *ngFor="let tile of tiles">
    <div>{{tile}}</div>
  </mat-grid-tile>
</mat-grid-list>

这里，cols 属性指定布局应该分为多少列，rowHeight 属性指定行高，gutterSize 属性指定与瓷砖边缘之间的间隔距离。在上述示例中，我们使用了 Angular 的 ngFor 指令对每个瓷砖进行循环遍历。

结论

使用 Angular Material 非常容易，因为它提供了一系列优秀的 UI 组件。在本文中，我们介绍了如何安装和使用 Angular Material，以及如何在组件中使用不同的 Angular Material 组件。此外，我们还介绍了如何使用 Angular Material 创建响应式布局。希望这篇文章对你们有所指导和帮助！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/673765c8317fbffedf0a0f70