angular 引入material-ui
第一步:安装material和cdk和animations,一个也不能缺,否则会报错。
npm install --save @angular/material @angular/cdk @angular/animations
第二步:在核心模块引入BrowserAnimationsModule和需要用到的material组件
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MatSidenavModule, MatListModule, MatIconModule, MatButtonModule} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({
imports: [
CommonModule,
MatSidenavModule,
MatListModule,
MatIconModule,
MatButtonModule,
BrowserAnimationsModule
],
exports:[
CommonModule,
MatSidenavModule,
MatListModule,
MatIconModule,
MatButtonModule
],
declarations: []
})
export class SharedModule { }
如果想要禁止material的动画效果,可以导入NoopAnimationsModule
import {NoopAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({
...
imports: [NoopAnimationsModule],
...
})
export class SharedAppModule { }
第三步:导入material的css样式
可以在项目的根目录文件中的style.scss里面加入以下代码
@import "~@angular/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">
angular 引入material-ui的更多相关文章
- Angular 2 to Angular 4 with Angular Material UI Components
Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...
- 仿Material UI框架的动画特效
Material UI是一款功能非常强大,界面却十分清新简洁的CSS框架,Material UI利用了Google的Material Design 全新设计语言,并且让每一个UI组件都变得非常独立,因 ...
- angular 引入编辑器以及控制器的学习和理解。。。
在angular中引入编辑器的时候花了很长时间,然后发现自己以前根本就没好好用过angular,因为项目是接手的学姐的,学姐又是接手的学姐的,到我这里就只是写写页面的事了. 引入编辑器差了好多好多资料 ...
- 开始使用Material UI
Material-UI采用 Material Design风格的React UI组件,所以要想学习material ui先要了解react. material ui安装 Material-UI 可以使 ...
- Material UI – Material Design CSS 框架
Material Design 是谷歌推出的全新的设计理念,采用大胆的色彩.流畅的动画播放,以及卡片式的简洁设计.Material Design 风格的设计拥有干净的排版和简单的布局,容易理解,内容才 ...
- 用angular引入复杂的json文件2
昨天我们也说了一下angular引入复杂json文件的方法,今天我们再来学习一种方法,而且更简单,更快捷. 首先我们引入一个angular插件,并且写上引入模块和控制台,在html中书写上模块名和控制 ...
- Material UI:很强大的CSS框架
Material UI 是一款功能很强大,界面却十分清新简洁的CSS框架.Material UI利用了Google的Material Design 全新设计语言.而且让每个UI组件都变得很独立.因此开 ...
- vue Cli 按需引入Element UI 和全局引用Element UI
全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...
- material UI中withStyles和makeStyles的区别
在material UI中,withStyles和makeStyles是经常使用的两个用于封装样式的函数.对于刚使用material UI的开发者而言,可能不太清楚这两者的区别. 本文简要探究 ...
- 解决material UI中弹窗(dialog、popover等)内容被遮挡问题
在material ui中有几种弹出层,比如:dialog.popover等,这些弹出层都会遇到的一个公共问题是: 假如弹出层中的内容变化了,弹出层的位置并不会重新定位. 这样,假如一开始弹出层定位在 ...
随机推荐
- Android自己定义动态布局 — 多图片上传
Android自己定义动态布局 - 多图片上传 本文介绍Android中动态布局加入图片,多图片上传. 项目中效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5 ...
- QQ 特效学习 二 侧滑删除
上篇文章: http://www.cnblogs.com/xurui1995/p/5798631.html 今天来写不仅是qq而且在别的软件上也特别流行的侧滑删除 其实套路和前篇的一样,一个自定义Vi ...
- Day1下午解题报告
预计分数:0+30+30=60 实际分数:0+30+40=70 T1水题(water) 贪心,按长度排序, 对于第一幅牌里面的,在第二个里面,找一个长度小于,高度最接近的牌 进行覆盖. 考场上的我离正 ...
- [ Java ] [ Spring ] Spring 一些配置项 及 <context:annotation-config/> 專文解释说明
節錄重點: @ Resource .@ PostConstruct.@ PreDestro.@PersistenceContext.@Required 都必須聲明相關的 bean 所以如果總是需要按照 ...
- CentOS7 NFS配置
如果在安装Centos7时选择安装必要的开发工具选项,所以系统已经安好NFS必要的软件. 配置: # vi /etc/exports /home/qws/share 192.168.168.0/24 ...
- css3.0滚动条的优化
.ass_showFriends{width: 93%;height: 8.35rem;overflow-y: auto;} .ass_showFriends::-webkit-scrollbar{w ...
- coverage python 代码覆盖率工具使用(django 使用)
1. 安装包 pip install coverage 2.启动程序 coverage run -m pytest 3.获取html格式的报告文件 coverage html 4.创建配置文件 .co ...
- apache activemq Failed to bind to server socket 61616
windows环境上: 首先 nestat -ano | findstr "61616" 查看是否有进程,有的话kill掉, 若没有发现,查看windows Internet Co ...
- git -处理分支合并
1.分支间的合并 1)直接合并:把两个分支上的历史轨迹合二为一(就是所以修改都全部合并) zhangshuli@zhangshuli-MS-:~/myGit$ vim merge.txt zhangs ...
- Apache通用日志工具commons-logging和Log4j使用总结
转自:https://blog.csdn.net/lzl13391522110/article/details/53758536 Apache通用日志工具commons-logging和Log4j使用 ...