Angular Material 设计

Material Design

Material Design 是 Google 在 2014年开发的一款设计语言。该语言的目的是让用户在不同的设备上有相同的体验（界面和交互等）。

Material Design 基于三个主要原则：

1. Material 是一种隐喻：Material Design 的灵感来自于物理世界的不同介质和纹理，例如纸张和墨水。 通过构建系统化的动效和空间合理利用，原质化设计反映出真实的物理世界及其纹理，同时又绝不会脱离客观的物理规律。用光效、表面质感、运动感解释物体运动规律、交互方式、空间关系。
2. 鲜明、形象、深思熟虑：基本元素的处理借鉴传统的印刷设计——排版、网格、空间、比例、配色、图像使用——这些基础的平面设计规范，构建出视觉层级、视觉意义以及视觉聚焦。
3. 富有意义的动画：动画应该是有意义的、合理的。添加动画的目的是为了吸引用户的注意力，维持交互的连续性体验。动画本身反馈需细腻、清爽。转场效果需高效、清晰。

总之，Material Design 背后还有更多理论，可以在官方网站发现更多信息。

Angular Material

Angular Material 是由 Angular 团队为在 Angular 框架实现 Material Design 而开发的类库。主要特征如下：

• 容易集成
• 高性能
• 支持所有主流浏览器
• 主题多，易定制
• 支持本地化和国际化

Angular Material 主要包括下面几个部分：

• 组件 (Component)，提供了开箱即用的大量 UI 组件，如输入框，按钮，布局，导航，对话框，表格，分页，进度条等等。
• 主题 (Theme)，提供了若干预制的主题，也可以按照主题开发指导，创建自己的主题。
• 图标 (Icon)，提供了超过 900 多个图标，满足日常所需。

创建 Material 应用

我们已经介绍了所有基础理论，现在就动手实践，创建一个新的 Angular 10 的 Material 应用。

1. 通过下面的命令，创建项目。

ng new my-app-material

2. 为项目添加 Angular Material 依赖包。

ng add @angular/material

在命令的执行过程中，会对几个问题做出回答，如下所示：

Installing packages for tooling via npm.
Installed packages for tooling via npm.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink [ Preview: https://material.angular
.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? (y/N)No
? Set up browser animations for Angular Material? Yes
UPDATE package.json (1322 bytes)
✔ Packages installed successfully.
UPDATE src/app/app.module.ts (423 bytes)
UPDATE angular.json (3804 bytes)
UPDATE src/index.html (493 bytes)
UPDATE src/styles.css (181 bytes)

3. 在 AppModule 模块中，导入 MatButtonModule.

…
import { MatButtonModule } from "@angular/material/button”;

@NgModule({
  …,
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 打开 app.component.html 文件，移除全部内容。然后，在文件中添加一个 button 元素，并为该元素设置 mat-button 指令。

<button mat-button>Materail 按钮</button>

5. 运行项目，访问 http://localhost:4200/，看到按钮效果如下图：
   Material 按钮