Eckiges Material
Material Design, chinesischer Name: Material Design Language, ist eine neue Designsprache, die von Google eingeführt wurde und laut Google dazu gedacht ist, ein konsistenteres und breiteres "Look and Feel" für Mobiltelefone, Tablets, Desktops und "andere Plattformen" zu bieten.
Laut Google basiert Material Design auf "echter Berührung, inspiriert vom Studium von Papier und Tinte" und ermöglicht es Nutzern, "die visuellen Hinweise zu verstehen, die zur Ersetzung der realen Welt verwendet werden", "ohne gegen die Prinzipien der Mechanik zu verstoßen". Darüber hinaus sind die Grundprinzipien von Licht, Oberfläche und Bewegung entscheidend, um darzustellen, wie sich Objekte im Raum bewegen, interagieren und zueinander existieren. Realistische Licht- und Schatteneffekte zeigen die Nähte zwischen den Blöcken, trennen Räume und markieren bewegliche Teile. Für eine ausführlichere Einführung besuchen Sie bitte die offizielle Website von MaterialDer Hyperlink-Login ist sichtbar.。
Angular Material ist eine Reihe von Angular2+ UI-Frameworks, die vom Angular-Team perfekt umgesetzt wurden, basierend auf der Materialspezifikation, der offiziellen Website-Adresse:Der Hyperlink-Login ist sichtbar.
Dieser Artikel verwendet die MatSnackBar-Komponente von Angular Material, um eine Warnbox zu kapseln – schauen wir uns zunächst die Renderings an:
Schritt 1: Installation
Schritt 2: Konfigurieren Sie die Animation
Sobald das Animationspaket installiert ist, importiere das BrowserAnimationsModule in deine Anwendung, um die Animationsunterstützung zu aktivieren.
app.module.ts Import wie folgt:
Schritt 3: Importiere das Theme
Das Einbeziehen von Themes ist notwendig, um alle Kern- und Themenstile auf Ihre Anwendung anzuwenden.
Um mit vorgefertigten Themes zu beginnen, fügen Sie eines der vorgefertigten Designs von Angular Material global in Ihre Anwendung ein. Wenn du die Angular CLI verwendest, kannst du sie einrichtenAn styles.scss：
Wenn SieNicht benutztWinkel-CLI, dann<link>kann passierenDeine Elemente enthalten vorgefertigte thematische index.html.
Schritt 4: Beginnen Sie mit der Kapselung des Warnkastens
Geben Sie das /app/services-Verzeichnis über den cmd-Befehl cd ein, und Sie können das Verzeichnis entsprechend Ihrem eigenen Projekt anpassen und den Befehl Create Service ausführen:
Der TS-Code ist wie folgt:
Schritt 5: Konfigurieren Sie das Promptfeld im CSS-Stil
Im Projektstyles.scssAm unteren Rand der Datei fügen Sie folgenden Stil hinzu, der je nach Ihrer aktuellen Situation angepasst werden kann! Der Code lautet wie folgt:
Schritt 6: Verwenden Sie das Warnfeld
Ich nehme die Login-Oberfläche als Beispiel und importiere sie in login.module.tsAlarmdienstundMatSnackBarModuleKomponentenmodule, wie folgt:
In login.component.ts Komponente verwendet, lautet der Code wie folgt:
MatSnackBar-Komponenten-API-Dokumentation:Der Hyperlink-Login ist sichtbar.
(Ende)
|
Veröffentlicht am 22.11.2018 15:00:49
|
|
|
|
