在 Angular 项目中快速实现基于 Material Design 的 UI-JavaScript中文网-JavaScript教程资源分享门户

前言

Angular 是目前非常流行的一种前端框架，它能帮助前端开发者快速构建复杂单页应用程序。而 Material Design，是一种被 Google 推荐使用的 UI 设计规范，因为它能够为用户带来更加美观、干净的体验。本文将介绍在 Angular 项目中如何使用 Material Design 快速实现 UI 设计。

安装 Angular Material

Angular Material 是 Angular 官方提供的帮助开发者快速构建基于 Material Design 的 UI 界面的库。在开始使用它之前，需要首先安装它。可以通过 npm 来安装：

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

注意，需要安装 Angular CDK 和 Angular Animations 两个依赖包。

导入 Angular Material

在你的 Angular 项目中，需要在 app.module.ts 文件中导入 Angular Material 的模块，例如：

// javascriptcn.com 代码示例
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';

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

注意上面的 MaterialModule 用来导入所需要的 Material Design 控件，它将在你的应用中作为依赖被注入到其它模块中去。

使用 Angular Material 控件

在你的组件中，需要导入需要使用的控件，并将它们加入到 HTML 中去。例如：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { MatCheckboxModule } from '@angular/material/checkbox';

@Component({
  selector: 'app-root',
  template: `
    <mat-checkbox>Check me!</mat-checkbox>
  `,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
}

通过上面的代码，我们就成功地在 HTML 中加入了一个单选框（checkbox）控件。

样式

Material Design 有它独特的设计风格，因此生成好的控件并不一定能够符合你想要的 UI 风格。为了满足你的需求，你可能需要使用自定义的样式来改变控件的颜色、边框、字体大小等等。在这个方面，Angular Material 提供了不同的方式来帮助你完成这些工作，其中最常见的方式就是使用 MatTableDataSource。例如，下面演示了如何使用 MatTableDataSource 来改变 Angular Material 表的 UI 风格。

首先，需要在 app.module.ts 文件中导入 MatTableModule 和 CdkTableModule：

// javascriptcn.com 代码示例
import { MatTableModule } from '@angular/material';
import { CdkTableModule } from '@angular/cdk/table';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatTableModule,
    CdkTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

接下来，在你的 Angular 组件文件中使用以下代码：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.81, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.011, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.007, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.999, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.998, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.18, symbol: 'Ne'},
];

@Component({
  selector: 'app-root',
  template: `
    <table mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
      </ng-container>
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>
      <ng-container matColumnDef="weight">
        <th mat-header-cell *matHeaderCellDef> Weight </th>
        <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
      </ng-container>
      <ng-container matColumnDef="symbol">
        <th mat-header-cell *matHeaderCellDef> Symbol </th>
        <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="highlight(row)"
          [ngClass]="{'example-highlighted': highlightedRows.includes(row)}"></tr>
    </table>
  `,
  styles: [`
    .example-table {
      width: 100%;
      margin: 0 auto;
      font-size: 14px;
    }
    .example-active {
      background-color: #3f51b5;
      color: white;
    }
    .example-highlighted {
      background-color: yellow;
    }
  `],
})
export class AppComponent {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
  highlightedRows = [];

  highlight(row) {
    this.highlightedRows.push(row);
  }
}

在上面的代码中，通过 dataSource 属性指定了数据源。控件将在内部被 Angular 自动更新，因此不需要额外处理。同时，样式信息也被包含在 Component 中的 style 节点中，例如 example-highlighted 类负责高亮文本。

总结

Material Design 控件能够快速帮助前端开发者快速构建 UI 设计，而使用 Angular Material 库则能够轻松地在 Angular 项目中实现这些 UI 控件。本文介绍了如何在 Angular 项目中快速安装和使用 Angular Material 控件，同时也展示了如何通过样式来进一步改变控件的外观和表现形式。希望本文内容能够帮助大家更好地了解 Material Design 和 Angular Material 的使用方法。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65859db5d2f5e1655d0371b3