Angular Material 7教程

Angular Material是一款基于Google的Material Design风格的UI库，用于Angular平台的开发。它提供了一组UI组件和交互指令，使得你可以快速构建精美的Web应用程序。

特性

• 美观的Material Design风格
• 多样的UI组件和交互指令
• 容易集成和使用
• 响应式设计，适配移动端和桌面端

安装

在Angular项目中安装Angular Material只需要执行以下命令：

npm install --save @angular/material @angular/cdk @angular/animations

然后在app.module.ts中导入和配置：

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

@NgModule({
  imports: [
    BrowserAnimationsModule,
    MatButtonModule, 
    MatCheckboxModule
  ],
})
export class AppModule { }

组件

Angular Material提供了大量的UI组件，以下是一部分：

• Button 按钮
• Checkbox 复选框
• Input 输入框
• Card 卡片
• List 列表
• Toolbar 工具栏
• Dialog 对话框
• Snackbar 消息提示

Button

使用material-button组件可以快速创建美观的按钮，例如：

<button mat-button>Click me!</button>
<button mat-raised-button>Click me!</button>
<button mat-stroked-button>Click me!</button>
<button mat-flat-button>Click me!</button>
<button mat-icon-button><mat-icon>face</mat-icon></button>

Dialog

使用material-dialog组件可以快速创建对话框，例如：

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

@Component({
  selector: 'app-root',
  template: '<button (click)="openDialog()">Open Dialog</button>',
})
export class AppComponent {
  constructor(private dialog: MatDialog) {}

  openDialog() {
    const dialogRef = this.dialog.open(DialogComponent, {
      width: '250px',
      data: { name: 'Angular' }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }
}

Snackbar

使用material-snackbar组件可以快速创建消息提示，例如：

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

@Component({
  selector: 'app-root',
  template: '<button (click)="openSnackbar()">Open Snackbar</button>',
})
export class AppComponent {
  constructor(private snackbar: MatSnackBar) {}

  openSnackbar() {
    this.snackbar.open('Hello world!', 'Close', {
      duration: 2000,
      panelClass: ['snackbar']
    });
  }
}

总结

Angular Material是一个非常流行的UI库，它提供了许多高质量的UI组件和交互指令，可帮助您快速构建美观的Web应用程序。如果您想使用Angular构建一个现代的Web应用程序，请考虑使用Angular Material。