angular6引入material-ui

发布时间：2020-12-17 07:03:27 所属栏目：安全来源：网络整理

导读：第一步：安装material和cdk和animations，一个也不能缺，否则会报错。 npm install --save @angular/material @angular/cdk @angular/animations 第二步：在核心模块引入BrowserAnimationsModule和需要用到的material组件 1 import { NgModule } from ‘@ang

第一步：安装material和cdk和animations，一个也不能缺，否则会报错。

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

第二步：在核心模块引入BrowserAnimationsModule和需要用到的material组件

 1 import { NgModule } from ‘@angular/core‘;
 2 import { CommonModule } from ‘@angular/common‘;
 3 import {MatSidenavModule,MatListModule,MatIconModule,MatButtonModule} from ‘@angular/material‘;
 4 import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations‘;
 5 
 6 @NgModule({
 7   imports: [
 8     CommonModule, 9     MatSidenavModule,10     MatListModule,11     MatIconModule,12     MatButtonModule,13     BrowserAnimationsModule
14   ],15   exports:[
16     CommonModule,17     MatSidenavModule,18     MatListModule,19     MatIconModule,20     MatButtonModule
21   ],22   declarations: []
23 })
24 export class SharedModule { }

如果想要禁止material的动画效果，可以导入NoopAnimationsModule

import {NoopAnimationsModule} from ‘@angular/platform-browser/animations‘;

@NgModule({
  ...
  imports: [NoopAnimationsModule],...
})
export class SharedAppModule { }

第三步：导入material的css样式

可以在项目的根目录文件中的style.scss里面加入以下代码

@import "[email?protected]/material/prebuilt-themes/indigo-pink.css";

第四步：mat-slide-toggle,?mat-slider,?matTooltip等这些组件需要hammerjs支持

npm install --save hammerjs

第五步：如果想要用material的icon，需要在根文件index.html加入以下代码

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!