Angular 9 Flex Layout Erste Schritte mit FxLayout und Angular Material

Blog

Angular 9 Flex Layout Erste Schritte mit FxLayout und Angular Material

Mit dem Flexbox-CSS-Layout können wir die Breite und Höhe von HTML-DOM-Elementen basierend auf dem verfügbaren Platz ändern.



Wir können verschiedene Arten von Layouts für verschiedene Arten von Anzeigegeräten und verschiedene Bildschirmgrößen definieren.

In diesem Video zeige ich Ihnen, wie Sie das responsive Layout mit Angular Flex-Layout zusammen mit Angular Material gestalten können.



Quellcode (GitHub-Link): https://github.com/Tariqu/flex-tutorial
Link zur Flex-Layout-Dokumentation: https://github.com/angular/flex-layout
Angular Material-UI-Dokumentation: http://material.angular.io/

Angular Flex Layout bietet eine ausgeklügelte Layout-API mit Flexbox CSS + mediaQuery. Dieses Modul bietet Angular-Entwicklern Komponenten-Layout-Funktionen mithilfe einer benutzerdefinierten Layout-API, mediaQuery-Observables und eingefügten DOM flexbox-2016 CSS-Stylings.



Die Flex Layout-Engine automatisiert auf intelligente Weise den Prozess der Anwendung geeigneter Flexbox-CSS auf Browseransichtshierarchien. Diese Automatisierung behebt auch viele der Komplexitäten und Problemumgehungen, die bei der traditionellen, manuellen, reinen CSS-Anwendung von Box-CSS auftreten.

http

Die wahre Stärke von Flex Layout liegt jedoch in seinem reaktionsschnellen Motor. Die Responsive API ermöglicht es Entwicklern, auf einfache Weise unterschiedliche Layouts, Größen und Sichtbarkeiten für verschiedene Ansichtsfenstergrößen und Anzeigegeräte anzugeben.

Einstieg
Beginnen Sie mit der Installation der Angular Layout-Bibliothek von npm

npm i -s @angular/flex-layout @angular/cdk

Als Nächstes müssen Sie das Layout-Modul in das Modul Ihrer App importieren.

app.module.ts

import { FlexLayoutModule } from ‘@angular/flex-layout’;
...

@NgModule ({
...
Importe: [ FlexLayoutModule ],
...
});
Nachdem dies konfiguriert ist, können Sie die Angular Layout-Attribute in Ihren HTML-Tags für das Flex-Layout verwenden:

#eckig #eckig 9 #html

www.youtube.com

Angular 9 Flex Layout Erste Schritte mit FxLayout und Angular Material

Mit dem Flexbox-CSS-Layout können wir die Breite und Höhe von HTML-DOM-Elementen basierend auf dem verfügbaren Platz ändern.