有关Material在Angular2中的使用（详细教程）-js教程-PHP中文网

有关Material在Angular2中的使用（详细教程）

亚连

发布： 2018-06-06 10:19:11

原创

1897 人浏览过

这篇文章主要介绍了Material(包括Material Icon)在Angular2中的使用,需要的朋友可以参考下

1.引入material npm包

npm install @angular/material @angular/cdk

登录后复制

2.新建一个ebiz-material.module.ts方便管理引入material的module

ng g module ebiz-material -app=ebiz-ui

登录后复制

3.在app的根module中引入ebiz-material.module.ts

import { EbizMaterialModule } from &#39;./ebiz-material/ebiz-material.module&#39;;
@NgModule({
  imports: [..., EbizMaterialModule],
  declarations: [
    ...
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

登录后复制

使用material组件

1.首先在ebiz-material.module.ts中引入material组件的module，例如我们要用到checkbox

(https://material.angular.io/components/checkbox/overview)，那就引入MatCheckboxModule，引入之后再exports。

import { NgModule } from &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;;
import { MatCheckboxModule } from &#39;@angular/material&#39;;
@NgModule({
 imports: [CommonModule, MatCheckboxModule],
 declarations: [],
 exports: [ MatCheckboxModule ]
})
export class EbizMaterialModule { }

登录后复制

2.在html文件中使用组件

<mat-checkbox [(ngModel)]="checked">Check me!</mat-checkbox>

登录后复制

使用material-icon

1.引入material-icon

npm install material-design-icons

登录后复制

如果下载失败（我是install失败了，也不去管它了，能用就行），可以到 github上下载下来，然后取出iconfont文件夹放到自己的项目目录下，并且在需要用到图标的css(scss)中引入,一般情况我们会放在style.scss中全局去使用。

@font-face {
 font-family: &#39;Material Icons&#39;;
 font-style: normal;
 font-weight: 400;
 src: url(assets/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
 src: local(&#39;Material Icons&#39;),
    local(&#39;MaterialIcons-Regular&#39;),
    url(assets/iconfont/MaterialIcons-Regular.woff2) format(&#39;woff2&#39;),
    url(assets/iconfont/MaterialIcons-Regular.woff) format(&#39;woff&#39;),
    url(assets/iconfont/MaterialIcons-Regular.ttf) format(&#39;truetype&#39;);
}
/* meterial icon的设定 */
.material-icons {
 font-family: &#39;Material Icons&#39;;
 font-weight: normal;
 font-style: normal;
 font-size: 24px; /* Preferred icon size */
 display: inline-block;
 line-height: 1;
 text-transform: none;
 letter-spacing: normal;
 word-wrap: normal;
 white-space: nowrap;
 direction: ltr;
 /* Support for all WebKit browsers. */
 -webkit-font-smoothing: antialiased;
 /* Support for Safari and Chrome. */
 text-rendering: optimizeLegibility;
 /* Support for Firefox. */
 -moz-osx-font-smoothing: grayscale;
 /* Support for IE. */
 font-feature-settings: &#39;liga&#39;;
}

登录后复制

2.在html的适当位置放上图标

<i class="material-icon">iconName<i>

登录后复制

使用material内置theme以及自定义theme

1.material中的组件会根据theme的不同，会有不一样的样式呈现，但是这些样式的不同只局限于material组件内部，不会影响自定义组件的样式。

2.styles.css文件名改为styles.scss，并且在angular-cli.json文件中修改为

"styles": [
    "styles.scss"
   ],

登录后复制

3.在style.scss文件中引入material预建主题(总共4个)

@import &#39;~@angular/material/prebuilt-themes/deeppurple-amber.css&#39;; 
 @import &#39;~@angular/material/prebuilt-themes/indigo-pink.css&#39;; 
 @import &#39;~@angular/material/prebuilt-themes/pink-bluegrey.css&#39;; 
 @import &#39;~@angular/material/prebuilt-themes/purple-green.css&#39;;

登录后复制

4.如果觉得这些主题不适合，可以自定义主题，在styles.scss同级目录下新建一个theme.scss，并写上自定义主题的内容(https://material.angular.io/guide/theming)

@import &#39;~@angular/material/theming&#39;;
@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.如果想要对某个组件进行主题特制，可以参考这里

7.在styles.scss中引入自定义主题

@import './theme';

上面是我整理给大家的，希望今后会对大家有帮助。

在微信小程序中如何实现圆形进度条

在webpack中实现动态引入文件

在JavaScript中有关的trick

以上是有关Material在Angular2中的使用（详细教程）的详细内容。更多信息请关注PHP中文网其他相关文章！