Flex Layout implementeren in Angular: een handleiding

Introductie

CSS Flex Layout wordt gebruikt om flexibele, vloeiende lay-outs te maken. Echter, bij het gebruik van Angular zijn er scenario's waarin we meer dynamische controle over de lay-outs nodig hebben. Bovendien vereist het gebruik van CSS Flexbox ingewikkelde styling die voor veel ontwikkelaars lastig kan zijn. Flex Layout is een component-engine die dit probleem probeert op te lossen. Het biedt een set directives die beschikbaar zijn voor implementatie in uw applicaties.

De Flex Layout maakt gebruik van Typescript wat het ideaal maakt voor Angular-applicaties. Er zijn geen externe stylesheets nodig en er kunnen verschillende directives worden gebruikt om responsieve lay-outs te maken. In deze handleiding zullen we een eenvoudige Angular-applicatie maken en Flex Layout injecteren om onze componenten te ordenen.

Laten we beginnen!

Vereisten

• Angular-applicaties maken gebruik van de Node.js runtime. Om deze handleiding te voltooien, moet Node.js op uw ontwikkelmachine zijn geïnstalleerd. We hebben een complete gids Hoe Node.js te installeren op Ubuntu 18.04 die u helpt om Node.js eenvoudig in te stellen.

• U moet ook enige bekendheid hebben met het gebruik van Angular-componenten en het opzetten van een Angular-project.

Projectconfiguratie

Hier moeten we twee stappen uitvoeren:

• We moeten een nieuwe Angular-applicatie opzetten.
• We moeten Flex Layout installeren vanaf npx zodat we het kunnen importeren en gebruiken in onze applicatie.

Om een nieuwe Angular-applicatie te maken, opent u uw terminal en voert u de onderstaande opdracht uit:

Hier maken we een nieuwe Angular-applicatie met behulp van @angular/cli. De naam van onze applicatie is angular-flex-example. We gebruiken CSS in plaats van Sass of Less als styling. Daarnaast geven we aan dat we geen routing nodig hebben. We maken ons ook geen zorgen over de tests, dus die slaan we ook over.

Nu uw applicatie klaar is, navigeert u naar de applicatiemap en voert u de onderstaande opdracht uit om Flex Layout te installeren:

Zodra de bovenstaande opdracht de installatie heeft voltooid, voegt u de onderstaande code toe aan uw app-module om FlexLayoutModule:

Voer vervolgens de onderstaande opdracht uit om te controleren of alles naar verwachting werkt:

Uw applicatie wordt standaard aangeboden op localhost:4200 by default. Navigeer naar deze URL in de webbrowser. U ziet het bericht: “angular-flex-example is running!. Nu deze installatie is voltooid, laten we onze template ontwerpen met behulp van Flex Layout.

De Flex Layout maken

Hier voegen we code toe in app.component.html om de Flex Layout te gebruiken met FlexLayoutModule. Ons eindresultaat zal vergelijkbaar zijn met de onderstaande afbeelding:

Om het bovenstaande resultaat te bereiken, opent u de app.component.css in uw editor en voegt u de onderstaande regels code toe:

Nu je de bovenstaande code hebt toegevoegd, open je het app.component.html-bestand en voeg je de volgende code toe. Deze code heeft twee container- divs en vijf binnenste divs:

Compileer en voer daarna je applicatie uit. Je zult vijf div's op elkaar gestapeld zien omdat we tot nu toe geen lay-out hebben opgegeven. Om de fxLayout toe te voegen, voeg je de onderstaande code toe:

In de bovenstaande code worden, na het toepassen van deze fxLayout, CSS-eigenschappen display:flex en flex-direction:row -stijlen toegepast op de container- divs. Wanneer je de applicatie nu uitvoert, heb je drie divs op de eerste rij en twee divs op de onderste rij.

Vervolgens voegen we fxLayoutAlign en fxLayoutGap toe om onze lay-out te verbeteren:

Dit zal place-content: stretch center en align-items: stretch-stijlen toepassen op de container div. Het zal ook 10px ruimte tussen de flex-items toepassen.

Nu we fxLayout hebben toegepast, is het tijd om onze lay-out responsief te maken:

Deze code stelt het breekpunt in voor de extra kleine xs schermen. Het scherm verandert de lay-out van de standaard rij naar kolom en de tussenruimte wordt verkleind van “10px” naar “0px” op de extra kleine schermen. Je kunt dit testen door de applicatie uit te voeren en de grootte van het venster te wijzigen naar xs (minder dan 599px breed). Je zult zien dat de styling verandert.

Voor verschillende schermgroottes hebben we verschillende achtervoegsels:

• sm  – klein

• md  – medium

• lg  – groot

• xl  – extra groot

We hebben ook directives voor child-elementen. Voeg fxFlex  toe zoals in de onderstaande code:

Dit zal flex-grow: 1, flex-shrink: 1, en flex-basis: 100% toepassen op de lay-out. Als je de breedtewaarde opgeeft, zal het de max-width-eigenschap toepassen.

Laten we overgaan tot het toevoegen van fxFlexOrder en fxFlexOffset:

Met deze code hebben we order: 3 toegepast op het tweede item. Het zal ook de margin-left: 50px maken voor het vierde item. Als je nu de applicatie uitvoert, zul je zien dat het tweede item zich op de derde positie van de rij bevindt, terwijl het vierde item 30px afstand vanaf het begin krijgt.

Afronding

In deze handleiding hebben we geleerd hoe we de Flex Layout in Angular-apps kunnen implementeren. Dit zal nuttig zijn omdat we kant-en-klare Flexbox CSS-lay-outs kunnen gebruiken zonder dat we de styling zelf hoeven te coderen. Als je meer informatie nodig hebt, raadpleeg dan de Flex Layout Wiki op de GitHub-pagina.

Om het in deze handleiding eenvoudig te houden, hebben we geen binding gebruikt om waarden in de componentklasse te binden. Zowel unidirectionele als bidirectionele binding is echter mogelijk in de componentklasse [fxLayout]="je lay-outrichting". Dit geeft je meer controle om lay-outs te bouwen en hiermee kunnen dynamische use-cases worden afgehandeld.

Angular-apps gebruiken Node.js als hun runtime. Als je meer wilt weten over Node.js en hoe je Node.js-applicaties op Docker implementeert, bekijk dan onze Hoe je een Node.js (Express.js)-app implementeert met Docker op Ubuntu 20.04Om meer te leren over Angular, bekijk onze handleiding  Navigatie met RouterLink, Navigate en NavigateByUrl in Angular Router.

Veel computerplezier!