Angular Material工具条组件

Angular Material是一个由谷歌开发的UI组件库，以便Angular开发人员能够以一种结构化和响应式的方式开发现代应用程序。通过使用这个库，我们可以大大增加终端用户的用户体验，从而为我们的应用程序赢得人气。这个库包含了现代的即用型元素，可以直接使用，只需最少或没有额外的代码。

<mat-toolbar>是一个容器，用于放置标题、题目或动作。在Angular材料中，工具栏被放置在应用程序的顶部，它可能包括标题或一些动作在应用程序的特定位置。工具栏可以是单行的，也可以是多行的，这取决于具体要求。创建单行的工具条可以用<mat-toolbar> &</mat-toolbar>标签来完成。对于创建多行的工具条，我们可以将<mat-toolbar-row>元素放在一个<mat-toolbar>.NET接口中。

语法:

<mat-toolbar> Content </mat-toolbar>

安装:

基本的前提条件是，我们必须在系统上安装Angular CLI，以便添加和配置Angular材料库。满足所需条件后，我们可以在Angular CLI上键入以下命令。

ng add @angular/material

详细的安装过程请参考在Angular应用程序中添加Angular材料组件的文章。

添加工具条组件：

为了使用工具条组件，我们需要将其导入module.ts文件中。

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

然后，我们需要将这个组件添加到我们的_imports _数组中。在这之后，我们就可以在我们的代码中使用它了。

项目结构:

安装成功后，项目结构将看起来像下面的图片。

Angular Material工具条组件

例子：下面的例子说明了Angular Material Toolbar的实现。

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
  
import { MatToolbarModule } from "@angular/material/toolbar";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } 
      from "@angular/platform-browser/animations";
import { MatIconModule } from "@angular/material/icon";
  
@NgModule({
  declarations: [AppComponent],
  exports: [AppComponent],
  imports: [
    CommonModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    BrowserModule,
    MatIconModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {}

<mat-toolbar class="title-toolbar">
  <mat-toolbar-row>
    <span class="title-center">GeeksforGeeks</span>
  </mat-toolbar-row>
</mat-toolbar>
  
<mat-toolbar>
  <mat-toolbar-row>
    <span>Tutorials</span>
    <span class="example-spacer"></span>
    <mat-icon class="example-icon" 
              aria-hidden="false" 
              aria-label="Tutorials">assignment
    </mat-icon>
  </mat-toolbar-row>
  
  <mat-toolbar-row>
    <span>Contribute Article</span>
    <span class="example-spacer"></span>
    <mat-icon
      class="example-icon"
      aria-hidden="false"
      aria-label="Write article">create
    </mat-icon>
    <mat-icon
      class="example-icon"
      aria-hidden="false"
      aria-label="Login or Register">
      how_to_reg
    </mat-icon>
  </mat-toolbar-row>
</mat-toolbar>

@import "~material-icons/iconfont/material-icons.css";
  
.example-icon {
  padding: 0 14px;
}
.example-spacer {
  flex: 1 1 auto;
}
  
.title-center {
  margin: 0 auto;
  color: white;
}
  
.title-toolbar {
  background: green;
}

输出:

Angular Material工具条组件