Heim > Artikel > Web-Frontend > Ü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-icons2. 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 Design1. 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 hier6. Wenn Sie eine bestimmte Komponente thematisieren möchten, können Sie hier nachschlagenFü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!