Implementace Flex Layout v Angularu: Návod jak na to

Hark Labs2022-05-12 · 12 min read

Implementace Flex Layout v Angularu: Návod jak na to

Úvod

CSS Flex Layout se používá k vytváření flexibilních plynulých rozvržení. Nicméně při použití Angular nastávají scénáře, kdy potřebujeme dynamičtější kontrolu nad rozvržením. Navíc použití CSS Flexbox vyžaduje složité stylování, což může být pro mnoho vývojářů obtížné. Flex Layout je komponentový engine, který se snaží tento problém vyřešit. Poskytuje sadu direktiv, které jsou k dispozici pro implementaci ve vašich aplikacích.

Flex Layout využívá Typescript, díky čemuž je ideální pro aplikace v Angularu. Nejsou potřeba žádné externí styly a k vytváření responzivních rozvržení lze použít různé direktivy. V tomto návodu vytvoříme jednoduchou aplikaci v Angularu a naimportujeme Flex Layout pro uspořádání našich komponent.

Začněme!

Požadavky

Aplikace v Angularu používají Node.js runtime. K dokončení tohoto návodu budete muset mít na svém vývojářském počítači nainstalovaný Node.js. Máme kompletní návod How To Install Node.js On Ubuntu 18.04, který vám pomůže Node.js snadno nastavit.
Budete také muset mít určité zkušenosti s používáním komponent Angularu a nastavením projektu v Angularu.

Konfigurace projektu

Zde musíme provést dva kroky:

Musíme nastavit novou aplikaci v Angularu.
Budeme muset nainstalovat Flex Layout z npx, abychom jej mohli importovat a používat v naší aplikaci.

Chcete-li vytvořit novou aplikaci v Angularu, otevřete terminál a spusťte následující pří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

Zde vytváříme novou aplikaci v Angularu pomocí @angular/cli. Název naší aplikace je angular-flex-example. Jako stylování budeme používat CSS namísto Sass nebo Less. Navíc specifikujeme, že nepotřebujeme směrování. Testy nás také nezajímají, takže je rovněž přeskočíme.

Nyní, když je vaše aplikace připravena, přejděte do adresáře aplikace a spuštěním níže uvedeného příkazu nainstalujte 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

Jakmile výše uvedený příkaz dokončí instalaci, přidejte do modulu aplikace níže uvedený kód pro import 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 { }

Dále spusťte níže uvedený příkaz, abyste se ujistili, že vše běží podle očekávání:

npm start

npm start

Vaše aplikace bude ve výchozím nastavení spuštěna na localhost:4200 by default. Přejdete na tuto URL adresu ve webovém prohlížeči. Uvidíte zprávu: “angular-flex-example is running!. Po dokončení tohoto nastavení navrhneme naši šablonu pomocí Flex Layout.

Vytvoření Flex Layoutu

Zde budeme přidávat kód do app.component.html pro použití Flex Layoutu s FlexLayoutModule. Náš konečný výsledek bude podobný obrázku níže:

Chcete-li dosáhnout výše uvedeného výsledku, otevřete app.component.css ve vašem editoru a přidejte následující řádky 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;

}

Nyní, když jste přidali výše uvedený kód, otevřete app.component.html soubor a přidejte následující kód. Tento kód má dva kontejnerové divy a pět vnitřních divů:

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

Poté aplikaci zkompilujte a spusťte. Uvidíte pět divů naskládaných na sobě, protože jsme dosud neposkytli žádné rozvržení. Chcete-li přidat fxLayout přidejte níže 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>

Ve výše uvedeném kódu se po aplikování tohoto fxLayout, CSS vlastnosti display:flex a flex-direction:row styly aplikují na kontejnerový divs. Nyní, když aplikaci spustíte, budete mít tři divy v prvním řádku a dva divy ve spodním řádku.

Dále přidáme fxLayoutAlign a fxLayoutGap pro vylepšení našeho rozvržení:

<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ím se aplikují styly place-content: stretch center a align-items: stretch na kontejner div. Také se tím aplikuje 10px volného místa mezi flex položkami.

Nyní, když jsme aplikovali fxLayout, je čas udělat naše rozvržení responzivní:

<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) pro extra malé xs obrazovky. Na těchto obrazovkách se změní rozvržení z výchozího řádku (row) na sloupec (column) a velikost mezery se zmenší z “10px” na “0px” na extra malých obrazovkách. To si můžete vyzkoušet spuštěním aplikace a změnou velikosti okna na xs (méně než 599px šířky). Uvidíte, jak se stylování změní.

Pro různé velikosti obrazovek máme různé přípony:

sm – malé
md – střední
lg – velké
xl – extra velké

Máme také direktivy pro podřízené prvky. Přidejte fxFlex jako v kódu níže:

<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 se použije flex-grow: 1, flex-shrink: 1, a flex-basis: 100% na rozvržení. Pokud zadáte hodnotu šířky, použije se vlastnost max-width vlastnost.

Přidejme 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>

Pomocí tohoto kódu jsme použili order: 3 na druhou položku. Také to nastaví margin-left: 50px u čtvrté položky. Pokud nyní aplikaci spustíte, uvidíte, že druhá položka je na třetí pozici v řádku, zatímco čtvrtá položka získá 30px odsazení od začátku.

Závěr

V tomto návodu jsme se naučili, jak implementovat Flex Layout v aplikacích Angular. To bude užitečné, protože budeme moci používat hotová rozvržení Flexbox CSS, aniž bychom museli sami kódovat styly. Pokud potřebujete více informací, podívejte se na Flex Layout Wiki na stránce GitHub.

Abychom v tomto návodu zachovali jednoduchost, nepoužili jsme binding k navázání hodnot ve třídě komponenty. Ve třídě komponenty je však možný jak jednosměrný, tak obousměrný binding [fxLayout]="směr vašeho rozvržení". To vám poskytne větší kontrolu nad vytvářením rozvržení a umožní to řešit dynamické případy použití.

Aplikace v Angularu používají jako své běhové prostředí Node.js. Pokud se chcete dozvědět více o Node.js a o tom, jak nasadit aplikace Node.js na Docker, podívejte se na náš Jak nasadit aplikaci Node.js (Express.js) pomocí Dockeru na Ubuntu 20.04 návod. Chcete-li se dozvědět více o Angularu, podívejte se na náš návod Navigace pomocí RouterLink, Navigate a NavigateByUrl v Angular Routeru.

Příjemné programování!

Hark Labs

Autor · CloudSigma

Preslav Dobrev je kreativní designér ve společnosti CloudSigma, který se zaměřuje na konzistentní firemní identitu prostřednictvím tradičních i inovativních marketingových kanálů. Je zdatný v propojování umělecké vize se strategickým marketingem za účelem vytváření působivých příběhů značky.

Implementace Flex Layout v Angularu: Návod jak na to

Úvod

Požadavky

Konfigurace projektu

Vytvoření Flex Layoutu

Závěr

Hark Labs

Komentáře