快速上手 Getting started

Angular Material 入门指南

Getting Started with Angular Material

本指南讲解了如何设置 Angular 项目以开始使用 Angular Material。它包含有关先决条件的信息、如何安装 Angular Material，以及在应用中显示一个 Material 范例组件，以验证你的设置。

This guide explains how to set up your Angular project to begin using Angular Material. It includes information on prerequisites, installing Angular Material, and optionally displaying a sample material component in your application to verify your setup.

Angular 资源

Angular Resources

如果你是 Angular 新手，或从一个新的 Angular 应用开始，参见 Angular 的完整入门指南和设置你的环境。

If you are new to Angular or getting started with a new Angular application, see Angular's full Getting Started Guide and Setting up your environment.

对于已有的应用，请按照以下步骤开始使用 Angular Material。

For existing applications, follow the steps below to begin using Angular Material.

Install Angular Material

使用 Angular CLI 的安装原理图通过运行以下命令来设置你的 Angular Material 项目：

Use the Angular CLI's installation schematic to set up your Angular Material project by running the following command:

ng add @angular/material

该 ng add 命令将安装 Angular Material、组件开发工具包（CDK）、Angular 动画，并询问下列问题，以确定要包括哪些功能：

The ng add command will install Angular Material, the Component Dev Kit (CDK), Angular Animations and ask you the following questions to determine which features to include:

  1. 选择一个预置的主题名或为自定义主题选择 “custom”：

    Choose a prebuilt theme name, or "custom" for a custom theme:

    你可以选择一个预置的 Material Design 主题或建立一个可扩展的自定义主题。

    You can choose from prebuilt material design themes or set up an extensible custom theme.

  2. 设置全局 Angular Material 排版样式：

    Set up global Angular Material typography styles:

    是否为应用程序套用全局排版样式。

    Whether to apply the global typography styles to your application.

  3. 为 Angular Material 设置浏览器动画：

    Set up browser animations for Angular Material:

    把 BrowserAnimationsModule导入到应用中，可以启用 Angular 的动画体系。拒绝它会使 Angular Material 中的动画失效。

    Importing the BrowserAnimationsModule into your application enables Angular's animation system. Declining this will disable most of Angular Material's animations.

ng add 命令还将执行以下配置：

The ng add command will additionally perform the following configurations:

  • 把项目依赖加入到 package.json 中

    Add project dependencies to package.json

  • 把 Roboto 字体添加到你的 index.html 中

    Add the Roboto font to your index.html

  • 把 Material Design 的图标字体添加到你 index.html 中

    Add the Material Design icon font to your index.html

  • 添加一些全局 CSS 样式：

    Add a few global CSS styles to:

    • 去掉 body 的边距

      Remove margins from body

    • 为 html 和 body 设置 height: 100%

      Set height: 100% on html and body

    • 把 Roboto 设置为默认的应用字体

      Set Roboto as the default application font

完工！ Angular Material 已经配置好应用于你的应用中了。

You're done! Angular Material is now configured to be used in your application.

Display a component

让我们在应用中显示一个滑块组件，来验证一切正常。

Let's display a slider component in your app and verify that everything works.

你需要通过把以下代码添加到 app.module.ts 文件中来导入 MatSliderModule。

You need to import the MatSliderModule that you want to display by adding the following lines to your app.module.ts file.

import { MatSliderModule } from '@angular/material/slider';
…
@NgModule ({....
  imports: [...,
  MatSliderModule,
…]
})

把 <mat-slider> 标签添加到 app.component.html，就像这样：

Add the <mat-slider> tag to the app.component.html like so:

<mat-slider min="1" max="100" step="1" value="1"></mat-slider>

运行本地开发服务器：

Run your local dev server:

ng serve

让浏览器访问 http://localhost:4200

Then point your browser to http://localhost:4200

你会在页面上看到这个 Material 滑块组件。

You should see the material slider component on the page.

除了安装原理图之外，Angular Material 还带有另外一些原理图（如导航、表格、地址表单等），可用于方便地在应用中生成预置的组件。

In addition to the installation schematic, Angular Material comes with several schematics (like nav, table, address-form, etc.) that can be used to easily generate pre-built components in your application.

指南目录