About the use of Material in Angular2 (detailed tutorial)-JS Tutorial-php.cn

About the use of Material in Angular2 (detailed tutorial)

亚连

Release： 2018-06-06 10:19:11

Original

1880 people have browsed it

This article mainly introduces the use of Material (including Material Icon) in Angular2. Friends who need it can refer to it

1.Introducing the material npm package

npm install @angular/material @angular/cdk

Copy after login

2. Create a new ebiz-material.module.ts to facilitate the management of modules that introduce material

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

Copy after login

3.Introduce ebiz-material.module into the root module of the app. ts

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

Copy after login

Using material component

1. First introduce the module of material component in ebiz-material.module.ts, For example, if we want to use checkbox

(https://material.angular.io/components/checkbox/overview), then introduce MatCheckboxModule and then export it.

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 { }

Copy after login

2. Use components in html files

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

Copy after login

Use material-icon

1.Introduce material-icon

npm install material-design-icons

Copy after login

If the download fails (I failed to install, I don’t care about it, as long as it works), you can download it from github, then take out the iconfont folder and put it in your own project directory, and use it when you need to use the icon. Introduced in css (scss), generally we will use it globally in 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;;
}

Copy after login

2. Place the icon in the appropriate position of the html

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

Copy after login

Use material’s built-in theme and custom theme

1. The components in material will be different according to the theme. There will be different styles presented, but these style differences are only limited to the inside of the material component and will not affect the style of the custom component.

2.Change the styles.css file name to styles.scss, and modify it in the angular-cli.json file to

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

Copy after login

3.Introduce the material pre-built theme into the style.scss file (4 in total)

@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;;

Copy after login

4. If you feel that these themes are not suitable, you can customize the theme, create a new theme.scss in the same directory as styles.scss, and write the content of the custom theme (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);

Copy after login

5. Some colors are used in step 3, such as $mat-blue, you can refer to here

6. If you want To theme a certain component, you can refer here

7.Introduce a custom theme into styles.scss

@import './theme';

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement a circular progress bar in the WeChat applet

Implement dynamic introduction of files in webpack

Tricks related to JavaScript

The above is the detailed content of About the use of Material in Angular2 (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!