Angular Material 7 – 工具栏

Angular Material是一个由谷歌开发的UI组件库，它提供了一系列的组件供开发者使用，其中之一就是工具栏（Toolbar）。工具栏可以用来作为页面的标题栏或者是操作栏，可以包含菜单按钮、搜索框、图标等内容。

安装Angular Material

在使用Angular Material时，需要先安装和引入相关的模块和样式文件。

1. 安装Angular Material和相关模块

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

2. 引入样式文件

在angular.json文件中的styles数组中添加以下两个文件路径。

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.css"
]

引入工具栏组件

在使用工具栏组件前，我们需要在模块中引入MatToolbarModule模块。

import { NgModule } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';

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

同时在需要使用工具栏的组件中引入它。

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

@Component({
  selector: 'app-toolbar-example',
  template: `
    <mat-toolbar color="primary">
      <span>My App</span>
    </mat-toolbar>
  `
})
export class ToolbarExampleComponent { }

在上面的例子中，我们定义了一个My App的标题，并使用color="primary"属性使工具栏使用了应用程序主色调。

工具栏中的图标

我们可以在工具栏中添加一个或多个图标，并使用MatIconModule模块来引入图标。

import { NgModule } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';

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

使用mat-icon元素来引入图标，例如添加一个menu的图标。

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

@Component({
  selector: 'app-toolbar-example',
  template: `
    <mat-toolbar color="primary">
      <button mat-icon-button>
        <mat-icon>menu</mat-icon>
      </button>
      <span>My App</span>
      <span class="fill-remaining-space"></span>
    </mat-toolbar>
  `
})
export class ToolbarExampleComponent { }

在上面的例子中，我们定义了一个menu按钮，并且使用fill-remaining-space类来使标题居中，其他空白部分填满剩余空间。

工具栏中的菜单

我们可以在工具栏中添加一个或多个菜单，并使用MatMenuModule模块来引入菜单。

import { NgModule } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';

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

使用mat-menu-trigger和mat-menu元素来引入菜单。

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

@Component({
  selector: 'app-toolbar-example',
  template: `
    <mat-toolbar color="primary">
      <button mat-icon-button>
        <mat-icon>menu</mat-icon>
      </button>
      <span>My App</span>
      <span class="fill-remaining-space"></span>
      <button mat-button [matMenuTriggerFor]="menu">
        <mat-icon>more_vert</mat-icon>
      </button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item>
          <mat-icon>settings</mat-icon>
          <span>Settings</span>
        </button>
        <button mat-menu-item>
          <mat-icon>help</mat-icon>
          <span>Help</span>
        </button>
        <button mat-menu-item>
          <mat-icon>exit_to_app</mat-icon>
          <span>Logout</span>
        </button>
      </mat-menu>
    </mat-toolbar>
  `
})
export class ToolbarExampleComponent { }

在上面的例子中，我们通过[matMenuTriggerFor]属性把菜单绑定到一个按钮上，并在mat-menu-item元素中定义菜单中的选项。

自定义样式

我们可以通过CSS来自定义工具栏的样式。例如，我们可以为工具栏设置box-shadow属性。

.mat-toolbar {
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 4px 0px, rgba(0, 0, 0, 0.14) 0px 2px 4px 0px, rgba(0, 0, 0, 0.2) 0px 1px 5px 0px;
}

结论

Angular Material提供了一个强大的工具栏组件，我们可以使用它来创建漂亮且功能强大的标题和操作栏。使用工具栏的同时，我们可以添加图标和菜单，并通过CSS来自定义样式。