Implementare Flex Layout in Angular: una guida pratica

Hark Labs2022-05-12 · 13 min read

Implementare Flex Layout in Angular: una guida pratica

Introduzione

CSS Flex Layout viene utilizzato per creare layout fluidi e flessibili. Tuttavia, quando si utilizza Angular ci sono scenari in cui abbiamo bisogno di un controllo più dinamico sui layout. Inoltre, l'uso di CSS Flexbox richiede uno styling complicato che può essere difficile per molti sviluppatori. Flex Layout è un motore di componenti che mira a risolvere questo problema. Fornisce un set di direttive disponibili per l'implementazione nelle tue applicazioni.

Flex Layout utilizza Typescript rendendolo ideale per le applicazioni Angular. Non sono necessari fogli di stile esterni e si possono utilizzare diverse direttive per creare layout reattivi. In questo tutorial, creeremo una semplice applicazione Angular e inietteremo Flex Layout per disporre i nostri componenti.

Cominciamo!

Prerequisiti

Le applicazioni Angular utilizzano il runtime Node.js. Per completare questo tutorial, dovrai avere Node.js installato sulla tua macchina di sviluppo. Abbiamo una guida completa Come installare Node.js su Ubuntu 18.04 che ti aiuterà a configurare facilmente Node.js.
Dovrai anche avere una certa familiarità con l'uso dei componenti Angular e la configurazione di un progetto Angular.

Configurazione del progetto

Qui dobbiamo eseguire due passaggi:

Dobbiamo configurare una nuova applicazione Angular.
Dovremo installare Flex Layout da npx in modo da poterlo importare e utilizzare nella nostra applicazione.

Per creare una nuova applicazione Angular, apri il terminale ed esegui il comando seguente:

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

Qui stiamo creando una nuova applicazione Angular utilizzando @angular/cli. Il nome della nostra applicazione è angular-flex-example. Useremo CSS anziché Sass o Less per lo stile. Inoltre, specificheremo che non abbiamo bisogno del routing. Non ci interessano nemmeno i test, quindi salteremo anche quelli.

Ora che la tua applicazione è pronta, naviga nella directory dell'applicazione ed esegui il comando seguente per installare Flex Layout:

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

Una volta che il comando precedente ha completato l'installazione, aggiungi il codice seguente nel modulo della tua app per importare 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 { }

Successivamente, esegui il comando seguente per assicurarti che tutto funzioni come previsto:

npm start

npm start

La tua applicazione sarà servita su localhost:4200 per impostazione predefinita. Naviga su questo URL nel browser web. Vedrai il messaggio: “angular-flex-example is running!. Una volta completata questa configurazione, progettiamo il nostro template utilizzando Flex Layout.

Creare il Flex Layout

Qui aggiungeremo del codice in app.component.html per utilizzare il Flex Layout con FlexLayoutModule. Il nostro risultato finale sarà simile alla figura seguente:

Per ottenere il risultato sopra indicato, apri il file app.component.css nel tuo editor e aggiungi le righe di codice seguenti:

.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;

}

Ora che hai aggiunto il codice sopra, apri il file app.component.html e aggiungi il seguente codice. Questo codice ha due div container e cinque div interni:

<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>

Elemento 1

</div>

Elemento 2

</div>

Elemento 3

</div>

Elemento 4

</div>

Elemento 5

</div>

Dopodiché, compila ed esegui la tua applicazione. Vedrai cinque div impilati l'uno sull'altro perché finora non abbiamo fornito alcun layout. Per aggiungere il fxLayout aggiungi il codice qui sotto:

<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>

Elemento 1

</div>

Elemento 2

</div>

Elemento 3

</div>

Elemento 4

</div>

Elemento 5

</div>

Nel codice sopra, dopo aver applicato questo fxLayout, gli stili delle proprietà CSS display:flex e flex-direction:row vengono applicati al container divs. Ora, quando esegui l'applicazione, avrai tre div sulla prima riga e due div sulla riga inferiore.

Successivamente, aggiungiamo fxLayoutAlign e fxLayoutGap per migliorare il nostro layout:

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

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

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

</div>

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

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

Elemento 1

</div>

Elemento 2

</div>

Elemento 3

</div>

Elemento 4

</div>

Elemento 5

</div>

Questo applicherà gli stili place-content: stretch center e align-items: stretch al contenitore div. Applicherà anche 10px di spazio tra gli elementi flex.

Ora che abbiamo applicato fxLayout, è il momento di rendere il nostro layout responsivo:

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

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

</div>

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

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

Elemento 1

</div>

Elemento 2

</div>

Elemento 3

</div>

Elemento 4

</div>

Elemento 5

</div>

Questo codice imposterà il breakpoint per gli schermi extra piccoli xs. Lo schermo cambierà il layout da riga predefinita a colonna e la dimensione dello spazio si ridurrà da “10px” a “0px” negli schermi extra piccoli. Puoi testarlo eseguendo l'applicazione e ridimensionando la finestra a xs (meno di 599px di larghezza). Osserverai la modifica dello stile.

Per varie dimensioni dello schermo abbiamo diversi suffissi:

sm – piccolo
md – medio
lg – grande
xl – extra-grande

Abbiamo anche direttive per gli elementi figli. Aggiungi fxFlex come nel codice qui sotto:

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

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

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

</div>

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

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

</div>

Elemento 1

</div>

Elemento 2

</div>

Elemento 3

</div>

Elemento 4

</div>

Elemento 5

</div>

Questo applicherà flex-grow: 1, flex-shrink: 1, e flex-basis: 100% al layout. Se specifichi il valore di larghezza, applicherà la max-width proprietà.

Aggiungiamo fxFlexOrder e fxFlexOffset:

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

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

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

    <div class="item item-3" fxFlex>
    Elemento 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">
    Elemento 4
    </div>

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

</div>

Elemento 1

</div>

Elemento 2

</div>

Elemento 3

</div>

Elemento 4

</div>

Elemento 5

</div>

Utilizzando questo codice abbiamo applicato order: 3 al secondo elemento. Imposterà anche il margin-left: 50px al quarto elemento. Ora, se esegui l'applicazione, vedrai che il secondo elemento si trova nella terza posizione della riga, mentre il quarto elemento ottiene uno spazio di 30px dall'inizio.

In sintesi

In questo tutorial abbiamo imparato come implementare Flex Layout nelle app Angular. Questo sarà utile in quanto saremo in grado di utilizzare layout CSS Flexbox pronti all'uso senza dover codificare lo stile da soli. Se hai bisogno di ulteriori informazioni, fai riferimento al Flex Layout Wiki sulla pagina GitHub.

Per mantenere le cose semplici in questo tutorial, non abbiamo utilizzato il binding per associare i valori nella classe del componente. Tuttavia, sia il binding unidirezionale che quello bidirezionale sono possibili nella classe del componente [fxLayout]="la tua direzione del layout". Questo ti darà un maggiore controllo per creare layout e consentirà di gestire casi d'uso dinamici.

Le app Angular utilizzano Node.js come runtime. Se vuoi saperne di più su Node.js e su come distribuire applicazioni Node.js su Docker, dai un'occhiata al nostro Come distribuire un'app Node.js (Express.js) con Docker su Ubuntu 20.04 tutorial. Per saperne di più su Angular, dai un'occhiata al nostro tutorial Navigazione con RouterLink, Navigate e NavigateByUrl in Angular Router.

Buona programmazione!

Hark Labs

Autore · CloudSigma

Preslav Dobrev è un designer creativo presso CloudSigma, con un focus su un'identità aziendale coerente attraverso l'uso di canali di marketing tradizionali e innovativi. È abile nel fondere la visione artistica con il marketing strategico per creare narrazioni di brand di grande impatto.

Implementare Flex Layout in Angular: una guida pratica

Introduzione

Prerequisiti

Configurazione del progetto

Creare il Flex Layout

In sintesi

Hark Labs

Commenti