Implementierung von Flex Layout in Angular: Eine Anleitung

Hark Labs2022-05-12 · 13 min read

Implementierung von Flex Layout in Angular: Eine Anleitung

Einführung

CSS Flex Layout wird verwendet, um flexible, flüssige Layouts zu erstellen. Wenn man jedoch Angular verwendet, gibt es Szenarien, in denen wir eine dynamischere Kontrolle über die Layouts benötigen. Darüber hinaus erfordert die Verwendung von CSS Flexbox eine komplizierte Formatierung, die für viele Entwickler schwierig sein kann. Flex Layout ist eine Komponenten-Engine, die dieses Problem lösen soll. Sie bietet eine Reihe von Direktiven, die für die Implementierung in Ihren Anwendungen zur Verfügung stehen.

Das Flex Layout verwendet Typescript, was es ideal für Angular-Anwendungen macht. Es werden keine externen Stylesheets benötigt, und es können verschiedene Direktiven verwendet werden, um responsive Layouts zu erstellen. In diesem Tutorial werden wir eine einfache Angular-Anwendung erstellen und Flex Layout einbinden, um unsere Komponenten anzuordnen.

Fangen wir an!

Voraussetzungen

Angular-Anwendungen verwenden die Node.js-Laufzeitumgebung. Um dieses Tutorial abzuschließen, müssen Sie Node.js auf Ihrem Entwicklungsrechner installiert haben. Wir haben eine vollständige Anleitung Wie man Node.js auf Ubuntu 18.04 installiert, die Ihnen hilft, Node.js einfach einzurichten.
Sie sollten auch etwas vertraut sein mit der Verwendung von Angular-Komponenten und dem Einrichten eines Angular-Projekts.

Projektkonfiguration

Hier müssen wir zwei Schritte durchführen:

Wir müssen eine neue Angular-Anwendung einrichten.
Wir müssen Flex Layout von npx installieren, damit wir es in unserer Anwendung importieren und verwenden können.

Um eine neue Angular-Anwendung zu erstellen, öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:

npx @angular/cli new angular-flex-example --style=css --routing=false --skip-tests

1	npx @angular/cli new angular-flex-example --style=css --routing=false --skip-tests

Hier erstellen wir eine neue Angular-Anwendung mit @angular/cli. Der Name unserer Anwendung lautet angular-flex-example. Wir werden CSS anstelle von Sass oder Less für das Styling verwenden. Darüber hinaus geben wir an, dass wir kein Routing benötigen. Da uns die Tests ebenfalls nicht interessieren, überspringen wir diese ebenfalls.

Da Ihre Anwendung nun bereit ist, navigieren Sie in das Anwendungsverzeichnis und führen Sie den folgenden Befehl aus, um Flex Layout zu installieren:

cd angular-flex-example
npm install @angular/flex-layout@10.0.0-beta.32

1 2	cd angular-flex-example npm install @angular/flex-layout@10.0.0-beta.32

Sobald der obige Befehl die Installation abgeschlossen hat, fügen Sie den folgenden Code in Ihr App-Modul ein, um FlexLayoutModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from "@angular/flex-layout";
import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],

    imports: [
        BrowserModule,
        FlexLayoutModule
    ],

    providers: [],

    bootstrap: [AppComponent]
})

export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FlexLayoutModule } from "@angular/flex-layout";

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FlexLayoutModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Führen Sie als Nächstes den folgenden Befehl aus, um sicherzustellen, dass alles wie erwartet läuft:

npm start

npm start

Ihre Anwendung wird standardmäßig auf localhost:4200 bereitgestellt. Navigieren Sie im Webbrowser zu dieser URL. Sie sehen die Meldung: “angular-flex-example is running!. Nachdem diese Einrichtung abgeschlossen ist, entwerfen wir unsere Vorlage mit Flex Layout.

Erstellen des Flex Layouts

Hier werden wir Code in app.component.html einfügen, um das Flex Layout mit FlexLayoutModule zu verwenden. Unser Endergebnis wird der folgenden Abbildung ähneln:

Um das obige Ergebnis zu erzielen, öffnen Sie die app.component.css in Ihrem Editor und fügen Sie die folgenden Codezeilen hinzu:

.container {
    margin: 10px;
}

.item {
    border-radius: .2em;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 2em;
    padding: 4em 1em;
    text-transform: uppercase;
}

.item-1 {
    background-color: #009169;
}

.item-2 {
    background-color: #55b296;
}

.item-3 {
    background-color: #9fd3c3;
}

.item-4 {    
    background-color: #e7b013;
}

.item-5 {
    background-color: #073443;
}

.container {

margin: 10px;

}

.item {

border-radius: .2em;

color: #ffffff;

font-family: sans-serif;

font-size: 2em;

padding: 4em 1em;

text-transform: uppercase;

}

.item-1 {

background-color: #009169;

}

.item-2 {

background-color: #55b296;

}

.item-3 {

background-color: #9fd3c3;

}

.item-4 {

background-color: #e7b013;

}

.item-5 {

background-color: #073443;

}

Nachdem Sie den obigen Code hinzugefügt haben, öffnen Sie die app.component.html-Datei und fügen Sie den folgenden Code hinzu. Dieser Code hat zwei Container- divs und fünf innere divs:

<div class="container">
    <div class="item item-1">
    Item 1
    </div>
    
    <div class="item item-2">
    Item 2
    </div>
    
    <div class="item item-3">
    Item 3
    </div>

</div>

<div class="container">
    <div class="item item-4">
    Item 4
    </div>
    
    <div class="item item-5">
    Item 5
    </div>

</div>

Item 1

</div>

Item 2

</div>

Item 3

</div>

Item 4

</div>

Item 5

</div>

Kompilieren Sie danach Ihre Anwendung und führen Sie sie aus. Sie werden fünf div-Elemente übereinander gestapelt sehen, da wir bisher kein Layout bereitgestellt haben. Um das fxLayout hinzuzufügen, fügen Sie den folgenden Code hinzu:

<div class="container" fxLayout>
    <div class="item item-1">
    Item 1
    </div>

    <div class="item item-2">
    Item 2
    </div>

    <div class="item item-3">
    Item 3
    </div>

</div>

<div class="container" fxLayout>

    <div class="item item-4">
    Item 4
    </div>
   
    <div class="item item-5">
    Item 5
    </div>

</div>

Item 1

</div>

Item 2

</div>

Item 3

</div>

Item 4

</div>

Item 5

</div>

Im obigen Code werden nach der Anwendung dieses fxLayout die CSS-Eigenschaften display:flex und flex-direction:row-Styles auf das Container- div angewendets. Wenn Sie die Anwendung jetzt ausführen, haben Sie drei Divs in der ersten Zeile und zwei Divs in der unteren Zeile.

Als Nächstes fügen wir fxLayoutAlign und fxLayoutGap hinzu, um unser Layout zu verbessern:

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
    <div class="item item-1">
    Item 1
    </div>

    <div class="item item-2">
    Item 2
    </div>

    <div class="item item-3">
    Item 3
    </div>

</div>

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">  
    <div class="item item-4">
    Item 4
    </div>

    <div class="item item-5">
    Item 5
    </div>
</div>

Item 1

</div>

Item 2

</div>

Item 3

</div>

Item 4

</div>

Item 5

</div>

Dies wendet place-content: stretch center und align-items: stretch-Styles auf das Container- div an. Es wendet außerdem einen Abstand von 10px zwischen den Flex-Elementen an.

Nachdem wir nun fxLayout angewendet haben, ist es an der Zeit, unser Layout responsiv zu gestalten:

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-1">
    Item 1
    </div>
    
    <div class="item item-2">
    Item 2
    </div>

    <div class="item item-3">
    Item 3
    </div>

</div>

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-4">
    Item 4
    </div>

    <div class="item item-5">
    Item 5
    </div>
</div>

Item 1

</div>

Item 2

</div>

Item 3

</div>

Item 4

</div>

Item 5

</div>

Dieser Code legt den Breakpoint für die sehr kleinen xs-Bildschirme fest. Der Bildschirm ändert das Layout von der Standardzeile (row) zur Spalte (column) und die Abstandsgröße verringert sich von “10px” auf “0px” bei sehr kleinen Bildschirmen. Sie können dies testen, indem Sie die Anwendung ausführen und die Fenstergröße auf xs (weniger als 599px Breite) ändern. Sie werden feststellen, dass sich das Styling ändert.

Für verschiedene Bildschirmgrößen haben wir unterschiedliche Suffixe:

sm – klein
md – mittel
lg – groß
xl – sehr groß

Wir haben auch Direktiven für Kindelemente. Fügen Sie fxFlex wie im folgenden Code hinzu:

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-1" fxFlex="15%">
        Element 1
    </div>

    <div class="item item-2" fxFlex="20%">
        Element 2
    </div>

    <div class="item item-3" fxFlex>
        Element 3
    </div>

</div>

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">

    <div class="item item-4" fxFlex>
        Element 4
    </div>
    
    <div class="item item-5" fxFlex="200px">
        Element 5
    </div>

</div>

Element 1

</div>

Element 2

</div>

Element 3

</div>

Element 4

</div>

Element 5

</div>

Dies wendet flex-grow: 1, flex-shrink: 1, und flex-basis: 100% auf das Layout an. Wenn Sie den Breitenwert angeben, wird die Eigenschaft max-width angewendet.

Fügen wir fxFlexOrder und fxFlexOffset:

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">

    <div class="item item-1" fxFlex="15%">
    Element 1
    </div>

    <div class="item item-2" fxFlex="20%" fxFlexOrder="3">
    Element 2
    </div>

    <div class="item item-3" fxFlex>
    Element 3
    </div>
</div>

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-4" fxFlex fxFlexOffset="30px" fxFlexOffset.xs="0">
    Element 4
    </div>

    <div class="item item-5" fxFlex="200px">
    Element 5
    </div>

</div>

Element 1

</div>

Element 2

</div>

Element 3

</div>

Element 4

</div>

Element 5

</div>

Mit diesem Code haben wir order: 3 auf das zweite Element angewendet. Es wird auch den margin-left: 50px für das vierte Element festlegen. Wenn Sie die Anwendung nun ausführen, sehen Sie, dass sich das zweite Element an der dritten Position der Zeile befindet, während das vierte Element einen Abstand von 30px zum Anfang erhält.

Fazit

In diesem Tutorial haben wir gelernt, wie man das Flex Layout in Angular-Apps implementiert. Dies wird hilfreich sein, da wir fertige Flexbox-CSS-Layouts verwenden können, ohne das Styling selbst programmieren zu müssen. Wenn Sie weitere Informationen benötigen, lesen Sie das Flex Layout Wiki auf der GitHub-Seite.

Um die Dinge in diesem Tutorial einfach zu halten, haben wir kein Binding verwendet, um Werte in der Komponentenklasse zu binden. Es ist jedoch sowohl unidirektionales als auch bidirektionales Binding in der Komponentenklasse möglich [fxLayout]="Ihre Layout-Richtung". Dies gibt Ihnen mehr Kontrolle beim Erstellen von Layouts, und dynamische Anwendungsfälle können damit gelöst werden.

Angular-Apps verwenden Node.js als Laufzeitumgebung. Wenn Sie mehr über Node.js erfahren möchten und darüber, wie man Node.js-Anwendungen auf Docker bereitstellt, lesen Sie unser Wie man eine Node.js (Express.js) App mit Docker auf Ubuntu 20.04 bereitstellt-Tutorial. Um mehr über Angular zu erfahren, lesen Sie unser Tutorial Navigation mit RouterLink, Navigate und NavigateByUrl im Angular Router.

Viel Spaß beim Programmieren!

Hark Labs

Autor · CloudSigma

Preslav Dobrev ist ein kreativer Designer bei CloudSigma und konzentriert sich auf eine konsistente Unternehmensidentität durch traditionelle und innovative Marketingkanäle. Er versteht es meisterhaft, künstlerische Vision mit strategischem Marketing zu verbinden, um wirkungsvolle Markengeschichten zu schaffen.

Implementierung von Flex Layout in Angular: Eine Anleitung

Einführung

Voraussetzungen

Projektkonfiguration

Erstellen des Flex Layouts

Fazit

Hark Labs

Kommentare