material.angular使用

 

 

先上图：

 

官网：

https://material.angular.io/guide/getting-started

 

一、安装插件：

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

npm install --save hammerjs

二、导入： 

1、angular.json导入hammerjs

 

2、app.module.ts 导入MaterialModule

3、 component 对应的module导入具体的material模块：

如：MatButtonModule, MatCheckboxModule, MatSliderModule, MatSlideToggleModule

三、应用

<mat-slide-toggle (change) = "changeContr()"></mat-slide-toggle>

<mat-slider thumbLabel [displayWith]="formatLabel" tickInterval="30" min="0" max="100" [(ngModel)]="lightLevel" (change) = "changeSlider()"></mat-slider>

四、效果