Implementacija Flex Layouta u Angularu: Vodič kako to učiniti

Hark Labs2022-05-12 · 12 min read

Uvod

CSS Flex Layout se koristi za stvaranje fleksibilnih fluidnih rasporeda. Međutim, kada koristite Angular postoje scenariji kada nam je potrebna dinamičnija kontrola nad rasporedima. Nadalje, korištenje CSS-a Flexbox zahtijeva komplicirano stiliziranje što može biti teško za mnoge programere. Flex Layout je pokretač komponenti koji ima za cilj riješiti ovaj problem. Pruža skup direktiva koje su dostupne za implementaciju u vašim aplikacijama.

Flex Layout koristi Typescript što ga čini idealnim za Angular aplikacije. Nisu potrebne vanjske tablice stilova, a različite se direktive mogu koristiti za stvaranje responzivnih rasporeda. U ovom vodiču, stvorit ćemo jednostavnu Angular aplikaciju i ugraditi Flex Layout kako bismo rasporedili naše komponente.

Krenimo!

Preduvjeti

Angular aplikacije koriste Node.js izvršno okruženje. Da biste dovršili ovaj vodič, morat ćete imati instaliran Node.js na svom razvojnom računalu. Imamo cjeloviti vodič Kako instalirati Node.js na Ubuntu 18.04 koji će vam pomoći da jednostavno postavite Node.js.
Također ćete morati biti donekle upoznati s korištenjem Angular komponenti i postavljanjem Angular projekta.

Konfiguracija projekta

Ovdje moramo izvršiti dva koraka:

Moramo postaviti novu Angular aplikaciju.
Morat ćemo instalirati Flex Layout iz npx kako bismo ga mogli uvesti i koristiti u našoj aplikaciji.

Da biste stvorili novu Angular aplikaciju, otvorite svoj terminal i pokrenite naredbu u nastavku:

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

Ovdje stvaramo novu Angular aplikaciju koristeći @angular/cli. Naziv naše aplikacije je angular-flex-example. Koristit ćemo CSS umjesto Sass-a ili Less-a za stiliziranje. Osim toga, navest ćemo da nam ne treba usmjeravanje. Također nas ne zanimaju testovi, pa ćemo i njih preskočiti.

Sada kada je vaša aplikacija spremna, idite u direktorij aplikacije i pokrenite naredbu u nastavku za instalaciju Flex Layouta:

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

Nakon što gornja naredba završi instalaciju, dodajte donji kod u svoj modul aplikacije kako biste uvezli 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 { }

Zatim pokrenite naredbu u nastavku kako biste se uvjerili da sve radi kako se očekuje:

npm start

npm start

Vaša će se aplikacija posluživati na localhost:4200 prema zadanim postavkama. Idite na ovaj URL u web pregledniku. Vidjet ćete poruku: “angular-flex-example is running!. Nakon što je ovo postavljanje dovršeno, dizajnirajmo naš predložak koristeći Flex Layout.

Stvorite Flex Layout

Ovdje ćemo dodati kod u app.component.html kako bismo koristili Flex Layout s FlexLayoutModule. Naš konačni rezultat bio bi sličan slici u nastavku:

Da biste postigli gornji rezultat, otvorite app.component.css u svom uređivaču i dodajte donje retke koda:

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

}

Nakon što ste dodali gornji kôd, otvorite app.komponente.html datoteku i dodajte sljedeći kôd. Ovaj kôd ima dva kontejnerska div-a i pet unutarnjih div-ova:

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

</div>

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

</div>

Stavka 1

</div>

Stavka 2

</div>

Stavka 3

</div>

Stavka 4

</div>

Stavka 5

</div>

Nakon toga kompajlirajte i pokrenite svoju aplikaciju. Vidjet ćete pet div-ova poslaganih jedan na drugi jer do sada nismo definirali nikakav raspored. Za dodavanje fxLayout dodajte donji kôd:

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

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

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

</div>

<div class="container" fxLayout>

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

</div>

Stavka 1

</div>

Stavka 2

</div>

Stavka 3

</div>

Stavka 4

</div>

Stavka 5

</div>

U gornjem kodu, nakon primjene ovog fxLayout, CSS svojstva display:flex i flex-direction:row stilovi se primjenjuju na kontejnerski divs. Sada kada pokrenete aplikaciju, imat ćete tri div-a u prvom redu i dva div-a u donjem redu.

Zatim dodajemo fxLayoutAlign i fxLayoutGap kako bismo poboljšali naš raspored:

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

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

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

</div>

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

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

Stavka 1

</div>

Stavka 2

</div>

Stavka 3

</div>

Stavka 4

</div>

Stavka 5

</div>

Ovo će primijeniti place-content: stretch center i align-items: stretch stilove na kontejner div. Također će primijeniti 10px prostora između flex stavki.

Sada kada smo primijenili fxLayout, vrijeme je da naš raspored učinimo responzivnim:

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

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

</div>

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

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

Stavka 1

</div>

Stavka 2

</div>

Stavka 3

</div>

Stavka 4

</div>

Stavka 5

</div>

Ovaj kod će postaviti prijelomnu točku za vrlo male xs zaslone. Zaslon će promijeniti raspored iz zadane vrijednosti 'row' u 'column', a veličina razmaka smanjit će se s “10px” na “0px” na vrlo malim zaslonima. To možete testirati pokretanjem aplikacije i promjenom veličine prozora na xs (manje od 599px širine). Primijetit ćete promjenu stiliziranja.

Za različite veličine zaslona imamo različite sufikse:

sm – mali
md – srednji
lg – veliki
xl – vrlo veliki

Također imamo direktive za podređene elemente. Dodajte fxFlex kao u kodu ispod:

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

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

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

</div>

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

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

</div>

Stavka 1

</div>

Stavka 2

</div>

Stavka 3

</div>

Stavka 4

</div>

Stavka 5

</div>

Ovo će primijeniti flex-grow: 1, flex-shrink: 1, i flex-basis: 100% na raspored. Ako odredite vrijednost širine, to će primijeniti max-width svojstvo.

Dodajmo fxFlexOrder i fxFlexOffset:

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

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

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

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

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

</div>

Stavka 1

</div>

Stavka 2

</div>

Stavka 3

</div>

Stavka 4

</div>

Stavka 5

</div>

Koristeći ovaj kod primijenili smo order: 3 na drugu stavku. To će također postaviti margin-left: 50px na četvrtu stavku. Sada ako pokrenete aplikaciju, vidjet ćete da je druga stavka na trećoj poziciji u retku, dok četvrta stavka dobiva 30px razmaka od početka.

Zaključak

U ovom vodiču naučili smo kako implementirati Flex Layout u Angular aplikacijama. To će nam biti od pomoći jer ćemo moći koristiti gotove Flexbox CSS rasporede bez potrebe da sami pišemo kod za stiliziranje. Ako trebate više informacija, pogledajte Flex Layout Wiki na GitHub stranici.

Kako bismo pojednostavili stvari u ovom vodiču, nismo koristili povezivanje za povezivanje vrijednosti u klasi komponente. Međutim, i jednosmjerno i dvosmjerno povezivanje moguće je u klasi komponente [fxLayout]="smjer vašeg rasporeda". To će vam dati više kontrole za izradu rasporeda i omogućiti rješavanje dinamičkih slučajeva korištenja.

Angular aplikacije koriste Node.js kao svoje runtime okruženje. Ako želite saznati više o Node.js-u i kako implementirati Node.js aplikacije na Dockeru, pogledajte naš Kako implementirati Node.js (Express.js) aplikaciju s Dockerom na Ubuntu 20.04 vodič. Kako biste saznali više o Angularu, pogledajte naš vodič Navigacija s RouterLink, Navigate i NavigateByUrl u Angular Routeru.

Sretno programiranje!

Hark Labs

Autor · CloudSigma

Preslav Dobrev je kreativni dizajner u CloudSigma, usredotočen na dosljedan poslovni identitet korištenjem tradicionalnih i inovativnih marketinških kanala. Vješt je u spajanju umjetničke vizije sa strateškim marketingom kako bi stvorio dojmljive brendirane priče.

Implementacija Flex Layouta u Angularu: Vodič kako to učiniti

Uvod

Preduvjeti

Konfiguracija projekta

Stvorite Flex Layout

Zaključak

Hark Labs

Komentari