<强> 1。引入材料npm包
npm @angular安装@angular/材料/cdk
<强> 2。新建一个ebiz-material.module.ts方便管理引入材料的模块
ng g模块ebiz-material应用=ebiz-ui
<强> 3。在应用程序的根模块中引入ebiz-material.module.ts
从“进口{EbizMaterialModule}。/ebiz-material ebiz-material.module”;
@NgModule ({
进口:[…,EbizMaterialModule],
声明:[
…
),
模式(CUSTOM_ELEMENTS_SCHEMA):
})
1。首先在ebiz-material.module.ts中引入物质组件的模块,例如我们要用到复选框
(https://material.angular.io/components/checkbox/overview),那就引入MatCheckboxModule,引入之后再出口。
从“@angular进口{NgModule}/核心”;
从“@angular/普通”进口{CommonModule};
从@angular/材料的进口{MatCheckboxModule};
@NgModule ({
进口:[CommonModule, MatCheckboxModule],
声明:[],
出口(MatCheckboxModule):
}）
出口类EbizMaterialModule {}
2。在html文件中使用组件
& lt; mat-checkbox [(ngModel)]=凹觳椤钡脑诩觳槲? & lt;/mat-checkbox>
<强>使用material-icon
1。引入material-icon
npm安装material-design-icons
如果下载失败(我是安装失败了,也不去管它了,能用就行),可以到github上下载下来,然后取出iconfont文件夹放到自己的项目目录下,并且在需要用到图标的css (scss)中引入,一般情况我们会放在style.scss中全局去使用。
@font-face {
字体类型:“材料图标”;
字体样式:正常;
粗细:400;
src: url(资产/iconfont/MaterialIcons-Regular.eot);对ie6 - 8的/* */src:本地(“材料图标”),
本地(“MaterialIcons-Regular”),
url(资产/iconfont/MaterialIcons-Regular.woff2)格式(“woff2”),
url(资产/iconfont/MaterialIcons-Regular.woff)格式(woff的),
url(资产/iconfont/MaterialIcons-Regular.ttf)格式(“truetype”);
｝/*材料图标的设定*/.material-icons {
字体类型:“材料图标”;
粗细:正常;
字体样式:正常;
字体大小:24 px;/*首选图标大小*/显示:inline-block;
行高:1;
首字母:没有;
字母间距:正常;
自动换行:正常;
空白:nowrap;}
方向:ltr;/*对所有WebKit浏览器的支持。*/-webkit-font-smoothing:平滑;/*支持Safari和Chrome。*/文本渲染:optimizeLegibility;/*支持Firefox。*/-moz-osx-font-smoothing:灰度;/*支持IE。*/font-feature-settings:“联赛”;
}
2。在html的适当位置放上图标
& lt;我类=" material-icon "祝辞iconName
使用材料内置主题以及自定义主题
1.材料中的组件会根据主题的不同,会有不一样的样式呈现,但是这些样式的不同只局限于物质组件内部,不会影响自定义组件的样式。
2. styles文css件名改为styles.scss,并且在angular-cli.json文件中修改为
“风格”:(
“styles.scss”
),
3。在style.scss文件中引入材料预建主题总(共4个)
@ import“~ @angular/材料/的预构建主题/deeppurple-amber.css”;
@ import“~ @angular/材料/的预构建主题/indigo-pink.css”;
@ import“~ @angular/材料/的预构建主题/pink-bluegrey.css”;
@ import ~ @angular/材料/的预构建主题/purple-green.css的;
4。如果觉得这些主题不适合,可以自定义主题,在styles.scss同级目录下新建一个theme.scss,并写上自定义主题的内容(https://material.angular.io/guide/theming)
@ import ~ @angular/材料/主题的;
@include mat-core ();
$ my-app-primary: mat-palette ($ mat-blue);
美元my-app-accent: mat-palette ($ mat-teal A200 A100, A400);
$ my-app-warn: mat-palette ($ mat-red);
$ my-app-theme: mat-light-theme ($ my-app-primary my-app-accent美元my-app-warn美元);
@include angular-material-theme ($ my-app-theme);
5。在步骤3中用到了一些颜色,例如mat-blue美元,可以参考这里
6。如果想要对某个组件进行主题特制,可以参考这里
