Angular Material 7 教程

Angular Material 是一个开源、完整的、优美的 Material Design 风格的 UI 组件库，由 Angular 团队维护。它提供了大量的组件，包括按钮、卡片、导航栏、表格、输入框等等。使用 Angular Material 可以让我们的应用程序更加美观和功能强大。

安装

在使用 Angular Material 之前，需要先安装。可以使用 npm 安装，在命令行输入以下命令：

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

安装完成后，需要在 app.module.ts 中引入它们：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    MatInputModule,
    MatCardModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

在这个例子中，我们引入了三个组件：MatInputModule，MatCardModule 和 MatButtonModule。这些组件都是 Material Design 风格的。

使用

我们来创建一个简单的登录页面作为示例。首先在 app.component.html 文件中添加一些 HTML 代码：

<mat-card>
  <mat-card-header>
    <mat-card-title>
      Login
    </mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <mat-form-field>
      <input matInput placeholder="Username" [(ngModel)]="username">
    </mat-form-field>
    <mat-form-field>
      <input matInput placeholder="Password" [(ngModel)]="password" type="password">
    </mat-form-field>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button (click)="login()">Login</button>
  </mat-card-actions>
</mat-card>

这段代码中，我们使用了 mat-card 组件作为容器来放置登录表单。mat-card-header 组件用来放置标题，mat-card-content 组件用来放置输入框，mat-form-field 组件包裹着输入框，mat-card-actions 组件放置登录按钮。

在 app.component.ts 文件中，我们需要定义一些变量和方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  username: string;
  password: string;

  login() {
    console.log(`Username:  ${this.username}, Password:$ {this.password}`);
  }
}

自定义主题

Angular Material 7 允许我们自定义主题，可以修改颜色、字体等属性。在 angular.json 文件中，可以找到 styles 字段，把需要的颜色配置写在 styles 中，例如：

"styles": [
  "src/styles.scss",
  {
    "input-bg": "#eee",
    "primary-color": "#4caf50",
    "foreground-color": "#333"
  }
]

在样式表 styles.scss 中，我们可以使用上述颜色配置：

@import '~@angular/material/theming';
@include mat-core();

 $demo-app-accent: mat-palette($ mat-blue, 700, 900, A100);
 $demo-app-theme: mat-light-theme(( color: ( primary:$ primary-color,
    accent:  $demo-app-accent, warn:$ mat-red,
  )
));
@include angular-material-theme( $demo-app-theme); mat-form-field { background-color:$ input-bg;
  color: $foreground-color;
}

这段样式表使用 $primary-color、$ input-bg 和 $foreground-color 来定义颜色。其中，mat-palette 函数用来定义主题颜色，mat-light-theme 函数用来定义整个主题的色调。