什么叫Angular Material-

什么叫Angular Material?

什么叫Angular Material？

Angular Material是Angular官方UI组件库，它带来了一套现代化UI组件，能帮助我们更迅速地搭建典雅的Web应用软件。

Angular Material的组件库包括所有常见的UI组件，比如按键、表格、导航条、提示框、数据图表等。这种部件全是支持定制的，能够让我们依据我们的需求来设计自身的样式与行为。

Angular Material的另一个益处就是它的响应式页面，可以帮助大家在相关设备上搭建适应能力较好的Web应用软件。它也提供了一些互动式部件，比如滚轮、日期选择符、自动执行等，能帮助我们更加轻松地完成繁杂的用户交互。

怎么使用Angular Material？

需要使用Angular Material，大家必须要先组装它。我们可以用Angular CLI来安装及配备Angular Material。

组装Angular Material

最先，我们应该应用npm组装Angular Material和有关依靠：

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

在安装完毕后，我们应该在大家的Angular应用软件中导进所需要的控制模块。大家可以在app.module.ts文档中导进MatButtonModule和MatIconModule控制模块，并把他们导入到imports数组里：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

import { AppComponent } from './app.component';

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

在这样一个实例中，让我们导进了MatButtonModule和MatIconModule控制模块，并把他们导入到imports数组里。还导进了BrowserAnimationsModule控制模块，这也是Angular Material所需要的动漫控制模块。

应用Angular Material部件

一旦大家组装并引入了Angular Material控制模块，大家就可以去应用它部件了。比如，大家可以在大家应用程序中添加一个含有“Click me”按键的部件：

<button mat-raised-button color="primary">Click me</button>

在这样一个实例中，大家采用了mat-raised-button命令来创建一个凸出的按键，并把它颜色调整为primary。

大家也可以使用MatIconModule控制模块来添加一个含有标志的按键：

<button mat-icon-button>
  <mat-icon>menu</mat-icon>
</button>

在这样一个实例中，大家采用了mat-icon-button命令来创建一个含有标志的按键，并且在按键内部结构加了一个mat-icon元素来显示图标。在这样一个实例中，大家采用了menu图标。

订制Angular Material部件

Angular Material的部件是高度支持定制的，大家可以根据实际情况来改动他们的样式与行为。比如，我们可以用CSS来改动按键的颜色字体样式：

.mat-raised-button {
  background-color: red;
  color: white;
  font-family: 'Roboto', sans-serif;
}

在这样一个实例中，大家采用了CSS来改动.mat-raised-button类的样式，将按键的背景色设为鲜红色，将文本颜色调整是白色，并把文字设置为Roboto。

大家也可以使用Angular的样式关联来改动按键的样式与行为。比如，我们可以用[disabled]特性来禁止使用按键：

<button mat-raised-button [disabled]="isDisabled">Click me</button>

在这样一个实例中，使用[disabled]特性来关联isDisabled变量，这一自变量开关按钮有没有被禁止使用。

建立自定Angular Material部件

除开应用Angular Material所提供的部件，我们还可以建立自定的Angular Material部件。我们可以用Angular Material所提供的CDK（Component Dev Kit）来建立自定义组件。

最先，大家需要安装CDK：

npm install --save @angular/cdk

随后，在大家的自定义组件中，我们可以用CDK给予的指令和服务来完成各项功能。比如，我们可以用DragDropModule控制模块来达到拖拽作用：

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-custom-component',
  template: `
    <div cdkDropList (cdkDropListDropped)="onDrop($event)">
      <div cdkDrag *ngFor="let item of items">{{item}}</div>
    </div>
  `
})
export class CustomComponent {
  items = ['Item 1', 'Item 2', 'Item 3'];

  onDrop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.items, event.previousIndex, event.currentIndex);
  }
}

在这样一个实例中，大家创建了一个自定义组件，这其中包括一个拖拽目录。使用cdkDropList命令来创建一个拖拽目录，并用cdkDrag指令来建立可拖动元素。还采用了CdkDragDrop服务来完成拖拽作用。

汇总

Angular Material是一个功能强大UI组件库，能帮助我们更迅速地搭建现代化Web应用软件。它带来了各种各样常见的UI组件，而且这些部件全是支持定制的。除此之外，Angular Material也拥有响应式页面和互动式部件，能帮助我们搭建适应能力较好的Web应用软件。

需要使用Angular Material，大家必须要先组装它，并把所需要的控制模块导进我们自己的Angular应用软件。我们可以用Angular Material所提供的部件，还可以建立自定的Angular Material部件。无论是哪种方法，应用Angular Material都能够让我们更加轻松地搭建典雅的Web应用软件。

本站是一个以CSS、JavaScript、Vue、HTML为中心的前端开发技术网址。我们的使命是为众多前端工程师者提供全方位、全方位、好用的前端工程师专业知识和技术服务。 在网站上，大家可以学到最新前端开发技术，掌握前端工程师最新发布的趋势和良好实践。大家提供大量实例教程和实例，让大家可以快速上手前端工程师的关键技术和程序。 本站还提供了一系列好用的工具软件，帮助你更高效地开展前端工程师工作中。公司提供的一种手段和软件都要经过精心策划和改进，能够帮助你节约时间精力，提高研发效率。 此外，本站还拥有一个有活力的小区，你可以在社区里与其它前端工程师者沟通交流技术性、交流经验、处理问题。我们坚信，街道的能量能够帮助你能够更好地进步与成长。 在网站上，大家可以寻找你需要的一切前端工程师网络资源，使您成为一名更加出色的网页开发者。欢迎你添加我们的大家庭，一起探索前端工程师的无限潜能!