Implementácia Flex Layout v Angular: Príručka ako na to

Hark Labs2022-05-12 · 12 min read

Implementácia Flex Layout v Angular: Príručka ako na to

Úvod

CSS Flex Layout sa používa na vytváranie flexibilných plynulých rozložení. Avšak pri použití Angular existujú scenáre, kedy potrebujeme dynamickejšiu kontrolu nad rozložením. Navyše, používanie CSS Flexbox vyžaduje komplikovaný styling, čo môže byť pre mnohých vývojárov náročné. Flex Layout je komponentový engine, ktorý sa snaží tento problém vyriešiť. Poskytuje sadu direktív, ktoré sú k dispozícii na implementáciu vo vašich aplikáciách.

Flex Layout využíva Typescript, vďaka čomu je ideálny pre aplikácie v Angular. Nie sú potrebné žiadne externé štýly a na vytváranie responzívnych rozložení možno použiť rôzne direktívy. V tomto návode vytvoríme jednoduchú aplikáciu v Angular a injektujeme Flex Layout na usporiadanie našich komponentov.

Začnime!

Požiadavky

Aplikácie v Angular využívajú Node.js behové prostredie. Na dokončenie tohto návodu budete musieť mať na svojom vývojárskom stroji nainštalovaný Node.js. Máme kompletného sprievodcu Ako nainštalovať Node.js na Ubuntu 18.04, ktorý vám pomôže jednoducho nastaviť Node.js.
Budete tiež musieť mať určité skúsenosti s používaním komponentov Angular a nastavením projektu Angular.

Konfigurácia projektu

Tu musíme vykonať dva kroky:

Musíme nastaviť novú aplikáciu v Angular.
Budeme musieť nainštalovať Flex Layout z npx, aby sme ho mohli importovať a použiť v našej aplikácii.

Ak chcete vytvoriť novú aplikáciu v Angular, otvorte terminál a spustite nasledujúci príkaz:

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

Tu vytvárame novú aplikáciu v Angular pomocou @angular/cli. Názov našej aplikácie je angular-flex-example. Ako štýlovanie budeme používať CSS namiesto Sass alebo Less. Okrem toho špecifikujeme, že nepotrebujeme smerovanie. Nezaujímajú nás ani testy, takže ich tiež preskočíme.

Teraz, keď je vaša aplikácia pripravená, prejdite do adresára aplikácie a spustením nasledujúceho príkazu nainštalujte 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

Po dokončení inštalácie vyššie uvedeným príkazom pridajte do svojho modulu aplikácie nasledujúci kód na importovanie 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 { }

Ďalej spustite nasledujúci príkaz, aby ste sa uistili, že všetko funguje podľa očakávania:

npm start

npm start

Vaša aplikácia bude predvolene spustená na localhost:4200 predvolene. Prejdite na túto URL adresu vo webovom prehliadači. Uvidíte správu: “angular-flex-example is running!. Po dokončení tohto nastavenia navrhnime našu šablónu pomocou Flex Layout.

Create the Flex Layout

Tu pridáme kód do app.component.html na použitie Flex Layoutu s FlexLayoutModule. Náš konečný výsledok bude podobný obrázku nižšie:

Ak chcete dosiahnuť vyššie uvedený výsledok, otvorte app.component.css vo vašom editore a pridajte nasledujúce riadky kódu:

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

}

Teraz, keď ste pridali vyššie uvedený kód, otvorte app.komponent.html súbor a pridajte nasledujúci kód. Tento kód má dva kontajnerové divy a päť vnútorných divov:

<div class="container">
    <div class="item item-1">
    Položka 1
    </div>
    
    <div class="item item-2">
    Položka 2
    </div>
    
    <div class="item item-3">
    Položka 3
    </div>

</div>

<div class="container">
    <div class="item item-4">
    Položka 4
    </div>
    
    <div class="item item-5">
    Položka 5
    </div>

</div>

Položka 1

</div>

Položka 2

</div>

Položka 3

</div>

Položka 4

</div>

Položka 5

</div>

Potom skompilujte a spustite svoju aplikáciu. Uvidíte päť div-ov naskladaných na sebe, pretože sme doteraz neposkytli žiadne rozloženie. Ak chcete pridať fxLayout pridajte nižšie uvedený kód:

<div class="container" fxLayout>
    <div class="item item-1">
    Položka 1
    </div>

    <div class="item item-2">
    Položka 2
    </div>

    <div class="item item-3">
    Položka 3
    </div>

</div>

<div class="container" fxLayout>

    <div class="item item-4">
    Položka 4
    </div>
   
    <div class="item item-5">
    Položka 5
    </div>

</div>

Položka 1

</div>

Položka 2

</div>

Položka 3

</div>

Položka 4

</div>

Položka 5

</div>

Vo vyššie uvedenom kóde sa po aplikovaní tohto fxLayout, CSS vlastnosti display:flex a flex-direction:row štýly aplikujú na kontajnerový divs. Teraz, keď spustíte aplikáciu, budete mať tri divy v prvom riadku a dva divy v spodnom riadku.

Ďalej pridáme fxLayoutAlign a fxLayoutGap na vylepšenie nášho rozloženia:

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

    <div class="item item-2">
    Položka 2
    </div>

    <div class="item item-3">
    Položka 3
    </div>

</div>

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

    <div class="item item-5">
    Položka 5
    </div>
</div>

Položka 1

</div>

Položka 2

</div>

Položka 3

</div>

Položka 4

</div>

Položka 5

</div>

Týmto sa aplikujú place-content: stretch center a align-items: stretch štýly na kontajner div. Taktiež to aplikuje 10px priestoru medzi flex položkami.

Teraz, keď sme aplikovali fxLayout, je čas urobiť naše rozloženie responzívnym:

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

    <div class="item item-3">
    Položka 3
    </div>

</div>

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

    <div class="item item-5">
    Položka 5
    </div>
</div>

Položka 1

</div>

Položka 2

</div>

Položka 3

</div>

Položka 4

</div>

Položka 5

</div>

Tento kód nastaví bod zlomu (breakpoint) pre extra malé xs obrazovky. Obrazovka zmení rozloženie z predvoleného riadka (row) na stĺpec (column) a veľkosť medzery sa zmenší z “10px” na “0px” na extra malých obrazovkách. Môžete to otestovať spustením aplikácie a zmenou veľkosti okna na xs (menej ako 599px na šírku). Uvidíte, že štýlovanie sa zmení.

Pre rôzne veľkosti obrazoviek máme rôzne prípony:

sm – malé
md – stredné
lg – veľké
xl – extra veľké

Máme tiež direktívy pre dcérske prvky. Pridajte fxFlex ako v kóde nižšie:

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

    <div class="item item-2" fxFlex="20%">
        Položka 2
    </div>

    <div class="item item-3" fxFlex>
        Položka 3
    </div>

</div>

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

    <div class="item item-4" fxFlex>
        Položka 4
    </div>
    
    <div class="item item-5" fxFlex="200px">
        Položka 5
    </div>

</div>

Položka 1

</div>

Položka 2

</div>

Položka 3

</div>

Položka 4

</div>

Položka 5

</div>

Týmto sa aplikuje flex-grow: 1, flex-shrink: 1, a flex-basis: 100% na rozloženie. Ak zadáte hodnotu šírky, aplikuje sa max-width vlastnosť.

Pridajme fxFlexOrder a fxFlexOffset:

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

    <div class="item item-1" fxFlex="15%">
    Položka 1
    </div>

    <div class="item item-2" fxFlex="20%" fxFlexOrder="3">
    Položka 2
    </div>

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

    <div class="item item-5" fxFlex="200px">
    Položka 5
    </div>

</div>

Položka 1

</div>

Položka 2

</div>

Položka 3

</div>

Položka 4

</div>

Položka 5

</div>

Použitím tohto kódu sme aplikovali order: 3 na druhú položku. Taktiež to nastaví margin-left: 50px štvrtej položke. Teraz, ak spustíte aplikáciu, uvidíte, že druhá položka je na tretej pozícii v riadku, zatiaľ čo štvrtá položka získa 30px odsadenie od začiatku.

Zhrnutie

V tomto návode sme sa naučili, ako implementovať Flex Layout v aplikáciách Angular. Bude to užitočné, pretože budeme môcť používať hotové rozloženia Flexbox CSS bez toho, aby sme museli sami kódovať štýly. Ak potrebujete viac informácií, pozrite si Flex Layout Wiki na stránke GitHub.

Aby sme v tomto návode zachovali jednoduchosť, nepoužili sme väzbu na naviazanie hodnôt v triede komponentu. V triede komponentu je však možná jednosmerná aj obojsmerná väzba [fxLayout]="smer vášho rozloženia". To vám poskytne väčšiu kontrolu pri vytváraní rozložení a umožní riešiť dynamické prípady použitia.

Aplikácie Angular používajú ako svoje runtime prostredie Node.js. Ak sa chcete dozvedieť viac o Node.js a o tom, ako nasadiť aplikácie Node.js na Docker, pozrite si náš Ako nasadiť aplikáciu Node.js (Express.js) pomocou Dockeru na Ubuntu 20.04Ak sa chcete dozvedieť viac o Angular, pozrite si náš návod Navigácia pomocou RouterLink, Navigate a NavigateByUrl v Angular Router.

Príjemné programovanie!

Hark Labs

Autor · CloudSigma

Preslav Dobrev je kreatívny dizajnér v spoločnosti CloudSigma, ktorý sa zameriava na konzistentnú firemnú identitu prostredníctvom tradičných a inovatívnych marketingových kanálov. Dokáže brilantne spájať umeleckú víziu so strategickým marketingom, čím vytvára pôsobivé príbehy značky.

Implementácia Flex Layout v Angular: Príručka ako na to

Úvod

Požiadavky

Konfigurácia projektu

Create the Flex Layout

Zhrnutie

Hark Labs

Komentáre