Über die Verwendung von Material in Angular2 (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich die Verwendung von Material (einschließlich Materialsymbol) in Angular2 vorgestellt.

Stellen Sie das Material-NPM-Paket vor

npm install @angular/material @angular/cdk

2. Erstellen Sie ein neues ebiz-material.module.ts, um die Verwaltung des Moduls zu erleichtern, das Material einführt

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

3 Root-Modul der App. material.module.ts, Wenn wir beispielsweise checkbox

(https://material.angular.io/components/checkbox/overview) verwenden möchten, führen wir MatCheckboxModule ein und exportieren es dann.

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

2. Komponenten in HTML-Dateien verwenden

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

Material-Icon verwenden

1. Material-Icon einführen

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

Wenn der Download fehlschlägt (die Installation ist fehlgeschlagen, ist mir das egal, solange es funktioniert), können Sie es von Github herunterladen, dann den Iconfont-Ordner herausnehmen, in Ihrem eigenen Projektverzeichnis ablegen und verwenden Wenn Sie das in CSS (SCSS) eingeführte Symbol verwenden müssen, verwenden wir es im Allgemeinen global in style.scss.

npm install material-design-icons

2. Platzieren Sie das Symbol an der entsprechenden Position im 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';
}

Verwenden Sie das integrierte Design und das benutzerdefinierte Design

1. Die Komponenten im Material werden unterschiedlich sein Je nach Thema werden unterschiedliche Stile angezeigt, diese Stilunterschiede beschränken sich jedoch nur auf das Innere der Materialkomponente und haben keinen Einfluss auf den Stil der benutzerdefinierten Komponente.

2. Ändern Sie den Namen der Datei „styles.css“ in „styles.scss“ und ändern Sie ihn in der Datei „angular-cli.json“ in „

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

3“. style.scss-Datei (insgesamt 4)

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

4. Wenn Sie der Meinung sind, dass diese Themen nicht geeignet sind, können Sie das Thema anpassen, eine neue theme.scss im selben Verzeichnis wie „styles.scss“ erstellen und Schreiben Sie den Inhalt des benutzerdefinierten Themas (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';

5. Einige Farben werden in Schritt 3 verwendet, z. B. $mat-blue, auf das Sie sich beziehen können hier

6. Wenn Sie eine bestimmte Komponente thematisieren möchten, können Sie hier nachschlagen

Fügen Sie ein benutzerdefiniertes Theme in „styles.scss“ ein

Das Obige habe ich für Sie zusammengestellt. Ja, ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

So implementieren Sie einen kreisförmigen Fortschrittsbalken im WeChat-Miniprogramm

@import './theme';

Dynamisches Importieren von Dateien in Webpack

Verwandte Tricks in JavaScript

Das obige ist der detaillierte Inhalt vonÜber die Verwendung von Material in Angular2 (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!