Was ist Winkelmaterial und wie wird es implementiert?

UI / UX-Komponenten in Angular sind bekannt als Winkelmaterialien. SieHilfe bei der Ausführung von Angular Applications effizient . Wenn Sie sich dieser jedoch noch nicht bewusst sind, finden Sie hier einen Artikel, der Ihnen hilft, Angular Materials im Detail zu lernen. Auch tUm sich eingehend mit Angular vertraut zu machen, sollten Sie sich anmelden ' von Edureka.

In diesem Artikel werde ich auf folgende Themen eingehen:

• Einführung in Winkelmaterialien
• Installation von Winkelmaterial
• Winkelmaterialkomponenten
  • Navigation
    1. Symbolleiste
    2. Speisekarte
  • Formularsteuerelemente
    1. Formularfeld
    2. Radio knopf
• Winkelmaterial CDK
  • Textfeld

Einführung in Winkelmaterialien

Materialien wurden als Designsprache eingeführt, die 2014 von Google entwickelt wurde. Material Design ist ein Werkzeugfür Front-End-Frameworks, die Ihnen dabei helfen visuell , Bewegung , und Interaktion Design. Es hilft Ihnen auch bei der Anpassung an verschiedene Geräte und verschiedene Bildschirmgrößen. Zunächst wurde es mit AngularJS markiert, um diese Apps besser zu machen attraktiv und durchführen Schneller . Dann hat Google den Code von Grund auf neu geschrieben und JS entfernt, d. H. und nannte es im September 2016. Später hat Google das Material Design mit Angular markiert, das verwendet und nannte es Angular Materials.

Winkelmaterialien oder UI-Komponenten (User-Interface) helfen Ihnen beim Entwerfen Ihrer Anwendung in a strukturiert Weise. Sie ziehen Benutzer an und machen es leichter zugänglich die in Ihrer Anwendung enthaltenen Elemente oder Komponenten. Sie helfen auch dabei, Ihre Anwendungen auf attraktive und einzigartige Weise zu gestalten Stile und Formen . Diese Komponenten helfen dabei, Ihre Anwendung zu verbessern konsistent , schnell , vielseitig und sogar Design reaktionsschnell Websites.

Installation von Winkelmaterial

Beginnen wir nun mit einem kurzen Tutorial zur Installation von Angular Materials. Stellen Sie zunächst sicher, dass Angular in Ihrem System installiert ist. Wenn Sie mit Angular nicht vertraut sind, lesen Sie den Link auf . Sobald Sie alles eingerichtet haben, können Sie Ihrem Projekt mit dem folgenden Befehl Angular Materials hinzufügen:

von add @ angle / material

Zunächst werden Sie aufgefordert, einen vorgefertigten Themennamen oder ein benutzerdefiniertes Thema auszuwählen.

Sie müssen das vorgefertigte Design „Indigo / Pink“ auswählen, das das Standarddesign für die Gestaltung Ihrer Anwendung ist. Sie können auch das Thema 'Benutzerdefiniert' auswählen, um Ihre Designdateien anzupassen, die alle gängigen Stile enthalten.

Als nächstes werden Sie aufgefordert, die Einstellungen vorzunehmen HammerJS . HammerJS ist eine beliebte Bibliothek, die hauptsächlich in Angular-Anwendungen verwendet wird. Es bietet Unterstützung für Berührungsgesten wie Streichen, Schwenken, Drücken, Drehen und vieles mehr, insbesondere in mobilen Anwendungen.

Sie können entweder 'Ja' oder 'Nein' wählen. HammerJS kann nützlich sein, wenn Sie Ihre Anwendung auf Mobiltelefonen verwenden. Da Mobiltelefone Touch-Displays anbieten, sind diese Gesten nützlicher und sehen in Ihrer mobilen Anwendung möglicherweise trendy aus.

Nachdem Sie Ihre Wahl getroffen haben, werden Sie aufgefordert, die Einstellungen vorzunehmen Browser-Animationen für eckiges Material.

Sie müssen 'Ja' auswählen, damit Sie Animationen für Ihre Anwendung verwenden können. Angular Animations machen Ihre Anwendung unterhaltsamer und benutzerfreundlicher. Dies kann Ihre App und Benutzererfahrung verbessern und die Aufmerksamkeit der Benutzer auf sich ziehen.

Anschließend wird Angular Materials in Ihrer Anwendung installiert.

Winkelmaterialkomponenten

Wie bereits erwähnt, sind Winkelmaterialkomponenten nichts anderes als UI / UX Designkomponenten. Sie enthalten eine Vielzahl von Komponenten wie Formularsteuerelemente, Navigation, Schaltflächen und Anzeigen, Popups und vieles mehr. Mit diesen Komponenten können Sie Muster gemäß der Material Design-Spezifikation implementieren.

Im Folgenden finden Sie einige Beispiele für die Implementierung dieser Komponenten in Ihrer Angular-Anwendung.

Navigation

Zunächst werde ich die Komponenten in der Navigation diskutieren.

• Symbolleiste

Sie müssen den folgenden Code in das Feld eingeben app.component.html Datei, um die Symbolleistenkomponente in Ihrer Anwendung zu verwenden.

 Angular Material Tutorial 

ist ein Container aus Angular-Material, der für Überschriften und Titel verwendet wird. Die Farbe der Container kann mit dem geändert werden Farbe Eigentum.Standardmäßig verwenden Symbolleisten eine neutrale Hintergrundfarbe, die auf dem aktuellen Thema basiert, d. H. Entweder hell oder dunkel.Sie können drei Standardthemen auswählen: ‘Primary’ , 'Akzent' , oder 'warnen' .Um diese Symbolleiste verwenden zu können, müssen Sie sie zuerst importieren app.module.ts Datei aus Angular-Materialien mit dem folgenden Befehl:

{MatToolbarModule} aus '@ angle / material' importieren

Später müssen Sie dieses Modul auch im hinzufügen Importe: [] Abschnitt befindet sich in der app.module.ts Datei.

Importe: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],

Für die Mat-Toolbar müssen Sie hinzufügen: MatToolbarModule ”.

Lassen Sie uns nun Ihr Projekt mit dem folgenden Befehl bedienen:

von dienen -o

Dadurch wird Ihr Projekt im Standardbrowser Ihres Systems wie folgt geöffnet:

Wenn Sie die Farbe der Symbolleiste nach Ihren Wünschen ändern möchten, können Sie dies mithilfe des CSS-Stylesheets tun. Lassen Sie mich Ihnen ein Beispiel zeigen.

Zuerst müssen Sie löschen Farbe Eigentum von Container und geben Sie dann Folgendes ein CSS Code in der app.component.css Datei.

mat-toolbar {Hintergrundfarbe: / * Farbe Ihrer Wahl * / Farbe: / * Textfarbe * /}

Dienen Sie nun Ihrem Projekt, um das Ergebnis zu sehen.

• Speisekarte

Als nächstes werde ich die Menükomponente diskutieren. Sie müssen den folgenden Code in Ihr eingeben app.component.html Datei.

 Angular Material Tutorial Menüeinstellungen Hilfe

Fügen wir dem etwas Styling hinzu Speisekarte Taste. Sie müssen den folgenden Code in Ihr eingeben app.component.css Datei.

.space {flex: 1 1 auto} .btns {width: 100px height: 40px font-size: großer randradius: 10px border: 3px solid # 113c89 hintergrundfarbe: lightcoral}

class = 'Leerzeichen' wird verwendet, um den Abstand zwischen 'Name der Symbolleiste' und 'Menüoption' hinzuzufügen.

Falls Sie mit dem CSS-Stylesheet nicht vertraut sind, können Sie auf unseren Blog unter verweisen in die Tiefe gehen.

Genau wie die Symbolleiste zu verwenden und Container müssen Sie zum Importieren wie oben beschrieben vorgehen MatMenuModule und MatButtonModule von eckiges Material und füge sie hinzu Importe: [] Abschnitt befindet sich in app.module.ts Datei.

Servieren Sie Ihr Projekt jetzt, um die Ausgabe anzuzeigen.

Formularsteuerelemente

Jetzt werde ich die Komponenten in Form Control diskutieren.

• Formularfeld

Wie der Name schon sagt, wird das Formularfeld für vom Benutzer eingegebene Eingaben verwendet. Es wird am häufigsten zur Registrierung eines Benutzers, in einer Anwendung oder auf einer Website verwendet.

Sie müssen den folgenden Code in das Feld eingeben app.component.html Datei, um die Form-Field-Komponente in Ihrer Anwendung zu verwenden.

 
Formularsteuerelemente
Name

Wie üblich müssen Sie importieren MatFormFieldModule und MatInputModule und füge sie hinzu Importe: [] Abschnitt befindet sich in der app.module.ts Datei. Der obige Code wird im Allgemeinen verwendet, um Namen wie 'Vorname', 'Nachname' usw. einzugeben. Sie können sogar Validatoren verwenden und ein Feld obligatorisch machen. Sie können es beispielsweise für das E-Mail-Feld verwenden. Sie können den Text für Kennwörter ein- oder ausblenden. Überprüfen Sie als Referenz den folgenden Code:

Geben Sie Ihre E-Mail-Adresse ein {{getErrorMessage ()}} Geben Sie Ihr Passwort ein {{hide? 'sichtbarkeit_off': 'sichtbarkeit'}}

In deiner app.component.css Datei müssen Sie den folgenden Code hinzufügen:

.example-container {padding-left: 50px}

Nun, in deinem app.component.ts Datei müssen Sie importieren FormControl und Validatoren von @ Winkel / Formen Verzeichnis.

{FormControl, Validators} aus '@ angle / forms' importieren

Sie müssen sogar den Text hinzufügen, um einen Fehler in der folgenden Klasse anzuzeigen.

Exportklasse AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('erforderlich')? 'Sie müssen einen Wert eingeben': this.email.hasError ('email')? 'Keine gültige E-Mail': ''} hide = true}

In Bezug auf das obige Verfahren müssen Sie den folgenden Code in Ihr eingeben app.module.ts Datei, um die erforderlichen Module zu importieren.

{FormsModule, ReactiveFormsModule} aus '@ angle / forms' importieren {MatIconModule} aus '@ angle / material' importieren

Später müssen Sie diese Module hinzufügen Importe: [] Sektion.

• Radio knopf

Optionsfelder werden im Allgemeinen verwendet, um eine Auswahl unter den verschiedenen Optionen zu treffen. Sie können den folgenden Code als Referenz überprüfen.

Zum app.component.html Datei,

 
Geschlecht
Männlich Weiblich

Zum app.component.css Datei,

mat-Optionsfeld {Padding-left: 50px}

Jetzt müssen Sie importieren MatRadioModule und füge es hinzu Importe: [] Abschnitt befindet sich in der app.module.ts Datei.

Später müssen Sie Ihr Projekt bedienen, um die Ausgabe anzuzeigen.

In Zukunft werde ich Angular Material CDK diskutieren.

Winkelmaterial CDK

CDK, auch bekannt als Komponenten-Entwicklungskit ist eine Bibliothek von vordefinierte Verhaltensweisen in Angular Material, einer Reihe von Werkzeugen, die Common implementieren Interaktionsmuster und Anwendungsfunktionen . Es gibt kein spezielles Design für Material Design. Sehen wir uns ein Beispiel für CDK an.

• Textfeld

Die Textfeldkomponente bietet Dienstprogramme zum Arbeiten mit Texteingabefeldern. Sie können CDK-Komponenten im Textfeld verwenden, um die Größe der Eingaben zu ändern. Sehen wir uns ein Beispiel für die Implementierung an.

Zum app.component.html Datei,

 
Winkelmaterial CDK
Schriftgröße 10px 12px 14px 16px 18px 20px Textbereich für die automatische Größe

Für die app.component.ts Datei müssen Sie zuerst die erforderlichen Komponenten importieren.

{CdkTextareaAutosize} aus '@ angle / cdk / text-field' importieren {NgZone, ViewChild} aus '@ angle / core' importieren {take} aus 'rxjs / operator'

Jetzt müssen Sie den folgenden Code in die Klasse eingeben.

Unterschied zwischen Git und Github

Exportklasse AppComponent {Konstruktor (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}

Als nächstes müssen Sie importieren MatSelectModule und füge es hinzu Importe: [] Abschnitt befindet sich in der app.module.ts Datei.

Schließlich müssen Sie Ihr Projekt bedienen, um die Ausgabe anzuzeigen.

Dies ist nicht die Schlussfolgerung und es gibt mehrere andere Komponenten in Angular Materials. Sie können auf sie von der verweisen offizielle Website von eckigem Material.

Damit möchte ich meinen Blog beenden. Ich hoffe, Sie sind sich über die Grundlagen von Angular Material im Klaren.Wenn Sie Zweifel oder Fragen zu diesem Artikel haben, zögern Sie nicht, diese im Kommentarbereich unten zu veröffentlichen.

Wenn Sie alles erfahren möchten, was Sie gerade aus diesem Blog gelernt haben, und mehr darüber Winkelig und richten Sie Ihre Karriere auf einen kompetenten Angular-Entwickler aus. Dann sollten Sie sich für unseren anmelden ' .

Hast du eine Frage an uns? Bitte erwähnen Sie dies im Kommentarbereich dieses Blogs „Angular Material“. Wir werden uns so schnell wie möglich bei Ihnen melden.