首页 > 其他 > 详细

angular6引入material-ui

时间:2018-12-24 13:47:36      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:lin   platform   rom   button   com   dap   anim   style   ati   

第一步:安装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">

 

angular6引入material-ui

标签:lin   platform   rom   button   com   dap   anim   style   ati   

原文:https://www.cnblogs.com/hibiscus-ben/p/10168103.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 designnerd.net 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号