Angular 2 中 Material Design 的实现

Material Design 是一种由 Google 设计的现代化设计语言，旨在提供一致的用户界面和交互体验。在 Angular 2 中，我们可以使用 Angular Material 来实现 Material Design 风格的应用程序。本文将介绍如何在 Angular 2 中使用 Angular Material 实现 Material Design。

安装 Angular Material

首先，我们需要安装 Angular Material。可以使用 npm 包管理器来安装 Angular Material 和其依赖项：

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

此外，我们还需要在 app.module.ts 中导入和配置 Angular Material 模块：

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

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

使用 Angular Material

使用 Angular Material 实现 Material Design 风格的应用程序非常简单。以下是一个示例组件，其中使用了 Angular Material 的一些组件：

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

@Component({
  selector: 'app-root',
  template: `
    <mat-toolbar color="primary">
      <span>My App</span>
      <button mat-button routerLink="/">Home</button>
      <button mat-button routerLink="/about">About</button>
    </mat-toolbar>
    <div class="container">
      <router-outlet></router-outlet>
    </div>
  `,
  styles: [`
    .container {
      padding: 16px;
    }
  `]
})
export class AppComponent { }

在这个示例中，我们使用了 mat-toolbar、mat-button 和 router-outlet 组件。mat-toolbar 组件用于创建一个顶部导航栏，mat-button 组件用于创建一个按钮，router-outlet 组件用于显示路由组件。

总结

Angular Material 提供了许多 Material Design 风格的组件，如按钮、卡片、表单控件等，可以轻松地创建现代化的应用程序。在本文中，我们介绍了如何在 Angular 2 中安装和使用 Angular Material。希望本文能够帮助您学习和使用 Angular Material，从而创建出更加美观和易用的应用程序。

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