À propos de l'utilisation de Material dans Angular2 (tutoriel détaillé)

Cet article présente principalement l'utilisation de Material (y compris Material Icon) dans Angular2. Les amis qui en ont besoin peuvent s'y référer

1 Présentez le package Material NPM

<.>

npm install @angular/material @angular/cdk

2. Créez un nouveau ebiz-material.module.ts pour faciliter la gestion des modules qui introduisent du matériel

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

3. le module racine de l'application materials.module.ts

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

Utiliser le composant matériel

1. materials.module.ts Présentez le module du composant matériel Par exemple, si nous voulons utiliser checkbox

(https://material.angular.io/components/checkbox/overview), puis introduisez MatCheckboxModule, et puis exportez-le après l'introduction.

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

2. Utiliser des composants dans les fichiers HTML

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

Utiliser l'icône matérielle

1.

Si le téléchargement échoue (je n'ai pas réussi à l'installer, donc je m'en fiche, tant que cela fonctionne), vous pouvez le télécharger depuis github, puis retirer le dossier iconfont et le mettre dans votre répertoire du projet, et il est introduit dans le css (scss) qui doit utiliser des icônes. Généralement, nous le mettrons dans style.scss et l'utiliserons globalement.

npm install material-design-icons

2. Placez l'icône à la position appropriée du code HTML

@font-face {
 font-family: 'Material Icons';
 font-style: normal;
 font-weight: 400;
 src: url(assets/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
 src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(assets/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
    url(assets/iconfont/MaterialIcons-Regular.woff) format('woff'),
    url(assets/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}
/* meterial icon的设定 */
.material-icons {
 font-family: 'Material Icons';
 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: 'liga';
}

Utilisez le thème intégré et le thème personnalisé du matériau

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

1. le matériau sera basé sur différents thèmes auront des styles différents, mais ces différences de style ne sont limitées qu'au composant matériel et n'affecteront pas le style du composant personnalisé.

2. Changez le nom du fichier styles.css en styles.scss et modifiez-le dans le fichier angulaire-cli.json en

3. Fichier .scss Créer un thème (4 au total)

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

4. Si vous estimez que ces thèmes ne conviennent pas, vous pouvez personnaliser le thème, créer un nouveau theme.scss dans le même répertoire que les styles .scss et écrivez le thème personnalisé Le contenu (https://material.angular.io/guide/theming)

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

Certaines couleurs sont utilisées à l'étape 3, comme $mat-blue. , vous pouvez vous référer ici

@import '~@angular/material/theming';
@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);

6 Si vous souhaitez créer un thème pour un certain composant, vous pouvez vous référer ici

7 Introduire un thème personnalisé dans styles.scss

<.>

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir. @import './theme';

Articles connexes :

Comment implémenter une barre de progression circulaire dans le mini-programme WeChat

Implémenter l'importation dynamique de fichiers dans le webpack

Astuces liées à JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!