Angular Material：构建美观的Material Design应用

Angular Material 是 Angular 的一个官方库，用于构建遵循 Material Design 规范的用户界面。它提供了许多组件，如按钮、表单控件、布局工具、对话框、抽屉、滑块等，帮助开发者快速创建美观且响应式的应用。

Material Design基础应用

首先，确保你已经安装了 Angular CLI 和 Angular Material。如果你还没有安装，可以使用以下命令：

npm install -g @angular/cli
ng new my-app
cd my-app
ng add @angular/material
1
2
3
4

这将创建一个新的 Angular 应用并添加 Angular Material 和 Angular CDK。

接下来，让我们创建一个简单的页面，包含一个导航栏、一个按钮和一个对话框：

1. 在 src/app 目录下创建一个名为 app.component.html 的模板文件，添加以下内容：

<!-- 导航栏 -->
<mat-toolbar color="primary">
  <span>My App</span>
</mat-toolbar>

<!-- 主要内容区域 -->
<div class="content">
  <button mat-raised-button (click)="openDialog()">Open Dialog</button>
</div>
1
2
3
4
5
6
7
8
9

2. 更新 app.component.ts 文件，引入所需的依赖并添加对话框逻辑：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(DialogComponent, { width: '250px' });
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3. 创建一个新的组件 dialog.component.ts 和 dialog.component.html，用于对话框的内容：

// dialog.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.scss']
})
export class DialogComponent implements OnInit {
  constructor() { }

  ngOnInit(): void {
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- dialog.component.html -->
<h2 mat-dialog-title>Dialog Title</h2>
<mat-dialog-content>
  This is the content of the dialog.
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>CANCEL</button>
  <button mat-button [mat-dialog-close]="tru

e">OK</button>
</mat-dialog-actions>
1
2
3
4
5
6
7
8
9
10
11

4. 最后，确保在 app.module.ts中导入所需的 Angular Material 模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatToolbarModule, MatDialogModule } from '@angular/material';

import { AppComponent } from './app.component';
import { DialogComponent } from './dialog.component';

@NgModule({
  declarations: [
    AppComponent,
    DialogComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatToolbarModule,
    MatDialogModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [DialogComponent] // 添加DialogComponent作为入口组件
})
export class AppModule { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

现在，当你运行 ng serve 并访问应用时，你会看到一个带有导航栏和按钮的页面。点击按钮会打开一个对话框。这个例子展示了 Angular Material 如何轻松地集成到 Angular 应用中，创建出符合 Material Design 标准的组件。

Angular Material 基础组件

Angular Material 还提供了许多其他组件，如表单控件、数据表、滑块、进度条、抽屉、侧边栏等。

1. MatInput 和 MatFormField：用于创建响应式输入字段。

<mat-form-field appearance="fill">
  <mat-label>Email</mat-label>
  <input matInput type="email" placeholder="example@example.com">
  <mat-error *ngIf="emailInvalid">Please enter a valid email address</mat-error>
</mat-form-field>
1
2
3
4
5

2. MatSelect：用于创建下拉选择框。

<mat-form-field appearance="fill">
  <mat-label>Choose a color</mat-label>
  <mat-select [(value)]="selectedColor">
    <mat-option value="red">Red</mat-option>
    <mat-option value="green">Green</mat-option>
    <mat-option value="blue">Blue</mat-option>
  </mat-select>
</mat-form-field>
1
2
3
4
5
6
7
8

3. MatTable：用于展示数据表格。

<table mat-table [dataSource]="dataSource">
  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

4. MatSlideToggle：用于创建滑动开关。

<mat-slide-toggle [(ngModel)]="isChecked">Toggle me</mat-slide-toggle>
1

5. MatProgressSpinner：用于显示进度指示器。

<mat-progress-spinner mode="indeterminate" diameter="50"></mat-progress-spinner>
1

6. MatSidenav 和 MatDrawer：用于创建抽屉和侧边栏。

<mat-sidenav-container>
  <mat-sidenav #drawer mode="over" opened="true">
    Sidenav content
  </mat-sidenav>
  <mat-sidenav-content>
    Main content
  </mat-sidenav-content>
</mat-sidenav-container>
1
2
3
4
5
6
7
8

7. MatButtonModule 和 MatIconModule：用于创建按钮和图标。

<button mat-raised-button>
  <mat-icon>home</mat-icon>
  Home
</button>
1
2
3
4

8. MatCard：用于创建卡片组件，常用于展示信息或内容。

<mat-card>
  <mat-card-header>
    <mat-card-title>Card Title</mat-card-title>
    <mat-card-subtitle>Subtitle</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="image-url.jpg" alt="Image description">
  <mat-card-content>
    <p>Card content goes here...</p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>ACTION</button>
  </mat-card-actions>
</mat-card>
1
2
3
4
5
6
7
8
9
10
11
12
13

9. MatStepper：用于创建步骤指示器，引导用户完成一系列操作。

<mat-horizontal-stepper linear>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <input matInput placeholder="Last name, First name" formControlName="firstName" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <mat-form-field>
        <textarea matInput placeholder="Address" formControlName="address" required></textarea>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

10. MatSnackBar：用于显示短暂的通知或消息。

import { MatSnackBar } from '@angular/material/snack-bar';

// ...
constructor(private snackBar: MatSnackBar) {}

showSnackBar() {
  this.snackBar.open('SnackBar message!', 'Close', {
    duration: 2000, // 持续时间（毫秒）
  });
}
1
2
3
4
5
6
7
8
9
10

<button mat-button (click)="showSnackBar()">Show SnackBar</button>
1