Flex Layout implementálása Angularban: Útmutató

Hark Labs2022-05-12 · 12 min read

Flex Layout implementálása Angularban: Útmutató

Bevezetés

CSS Flex Layout rugalmas, folyékony elrendezések létrehozására szolgál. Azonban, amikor az Angular keretrendszert használjuk, előfordulhatnak olyan esetek, amikor dinamikusabb vezérlésre van szükségünk az elrendezések felett. Továbbá a CSS Flexbox használata bonyolult stílusozást igényel, ami sok fejlesztő számára nehézséget okozhat. A Flex Layout egy olyan komponensmotor, amelynek célja ezen probléma megoldása. Olyan direktívák készletét biztosítja, amelyek implementálhatók az alkalmazásokban.

A Flex Layout a Typescript nyelvet használja, így ideális az Angular alkalmazásokhoz. Nincs szükség külső stíluslapokra, és a különböző direktívák segítségével responzív elrendezések hozhatók létre. Ebben az útmutatóban létrehozunk egy egyszerű Angular alkalmazást, és beágyazzuk a Flex Layoutot a komponenseink elrendezéséhez.

Kezdjük el!

Előfeltételek

Az Angular alkalmazások a Node.js futtatókörnyezetet használják. Az útmutató elvégzéséhez telepítenie kell a Node.js-t a fejlesztői gépére. Rendelkezésünkre áll egy teljes útmutató: Hogyan telepítsük a Node.js-t Ubuntu 18.04-re, amely segít a Node.js egyszerű beállításában.
Szüksége lesz továbbá némi jártasságra az Angular komponensek használatában és az Angular projekt beállításában.

Projekt konfiguráció

Itt két lépést kell végrehajtanunk:

Be kell állítanunk egy új Angular alkalmazást.
Telepítenünk kell a Flex Layoutot innen: npx, hogy importálhassuk és használhassuk az alkalmazásunkban.

Új Angular alkalmazás létrehozásához nyissa meg a terminált, és futtassa az alábbi parancsot:

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

Itt egy új Angular alkalmazást hozunk létre az @angular/cli segítségével. Az alkalmazásunk neve angular-flex-example. Stílusozáshoz CSS-t fogunk használni Sass vagy Less helyett. Ezenkívül megadjuk, hogy nincs szükségünk útválasztásra (routing). A tesztekkel sem foglalkozunk, így azokat is kihagyjuk.

Most, hogy az alkalmazás elkészült, navigáljon az alkalmazás könyvtárába, és futtassa az alábbi parancsot a Flex Layout telepítéséhez:

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

Miután a fenti parancs befejezte a telepítést, adja hozzá az alábbi kódot az app moduljához a 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 { }

Ezután futtassa az alábbi parancsot, hogy megbizonyosodjon arról, hogy minden a várt módon működik:

npm start

npm start

Az alkalmazás alapértelmezés szerint a localhost:4200 címen lesz kiszolgálva. Navigáljon erre az URL-re a webböngészőben. A következő üzenetet fogja látni: “angular-flex-example is running!. Miután ez a beállítás elkészült, tervezzük meg a sablonunkat a Flex Layout segítségével.

A Flex Layout létrehozása

Itt kódot fogunk hozzáadni az app.component.html fájlhoz, hogy a Flex Layoutot használjuk a FlexLayoutModule modullal. A végeredmény az alábbi ábrához hasonló lesz:

A fenti eredmény eléréséhez nyissa meg az app.component.css fájlt a szerkesztőjében, és adja hozzá az alábbi kódsorokat:

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

}

Miután hozzáadta a fenti kódot, nyissa meg az app.component.html fájlt, és adja hozzá a következő kódot. Ez a kód két konténer div-et és öt belső div-et tartalmaz:

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

</div>

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

</div>

Elem 1

</div>

Elem 2

</div>

Elem 3

</div>

Elem 4

</div>

Elem 5

</div>

Ezután fordítsa le és futtassa az alkalmazást. Öt div-et fog látni egymásra halmozva, mert eddig még nem adtunk meg semmilyen elrendezést. A fxLayout hozzáadásához adja hozzá az alábbi kódot:

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

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

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

</div>

<div class="container" fxLayout>

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

</div>

Elem 1

</div>

Elem 2

</div>

Elem 3

</div>

Elem 4

</div>

Elem 5

</div>

A fenti kódban, miután alkalmazta ezt a fxLayout-ot, a display:flex és flex-direction:row CSS tulajdonságok stílusai alkalmazásra kerülnek a konténer div-res. Most, amikor futtatja az alkalmazást, három div lesz az első sorban és két div az alsó sorban.

Ezután hozzáadjuk a fxLayoutAlign és fxLayoutGap irányelveket az elrendezésünk fejlesztéséhez:

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

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

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

</div>

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

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

Elem 1

</div>

Elem 2

</div>

Elem 3

</div>

Elem 4

</div>

Elem 5

</div>

Ez alkalmazni fogja a place-content: stretch center és align-items: stretch stílusokat a konténer div elemre. Emellett alkalmazni fog 10px távolságot a flex elemek között.

Most, hogy alkalmaztuk a fxLayout irányelvet, itt az ideje, hogy az elrendezésünket responzívvá tegyük:

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

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

</div>

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

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

Elem 1

</div>

Elem 2

</div>

Elem 3

</div>

Elem 4

</div>

Elem 5

</div>

Ez a kód beállítja a töréspontot az extra kicsi xs képernyőkhöz. A képernyő megváltoztatja az elrendezést az alapértelmezett sorról oszlopra, és a rés mérete lecsökken “10px” értékről “0px” értékre az extra kicsi képernyőkön. Ezt tesztelheti az alkalmazás futtatásával, és az ablak átméretezésével xs méretűre (kevesebb mint 599px szélességű). Megfigyelheti a stílus megváltozását.

A különböző képernyőméretekhez különböző utótagok tartoznak:

sm – kicsi
md – közepes
lg – nagy
xl – extra nagy

A gyermekelemekhez is vannak irányelveink. Adja hozzá a fxFlex irányelvet az alábbi kód szerint:

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

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

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

</div>

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

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

</div>

Elem 1

</div>

Elem 2

</div>

Elem 3

</div>

Elem 4

</div>

Elem 5

</div>

Ez alkalmazni fogja a(z) flex-grow: 1, flex-shrink: 1, és flex-basis: 100% tulajdonságokat az elrendezésre. Ha megadja a szélesség értékét, az a(z) max-width tulajdonságot fogja alkalmazni.

Adjunk hozzá fxFlexOrder és fxFlexOffset:

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

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

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

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

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

</div>

Elem 1

</div>

Elem 2

</div>

Elem 3

</div>

Elem 4

</div>

Elem 5

</div>

Ezzel a kóddal alkalmaztuk a(z) order: 3 tulajdonságot a második elemre. Ez szintén margin-left: 50px értéket fog beállítani a negyedik elemnek. Ha most futtatja az alkalmazást, láthatja, hogy a második elem a sor harmadik pozíciójában van, míg a negyedik elem 30px távolságot kap a kezdettől.

Összegzés

Ebben az útmutatóban megtanultuk, hogyan implementáljuk a Flex Layout-ot Angular alkalmazásokban. Ez nagyon hasznos lesz, mivel kész Flexbox CSS elrendezéseket használhatunk anélkül, hogy magunknak kellene megírnunk a stílusokat. Ha további információra van szükséged, olvasd el a Flex Layout Wiki oldalt a GitHubon.

Hogy az útmutató egyszerű maradjon, nem használtunk adatkötést az értékek összekapcsolására a komponens osztályban. Azonban mind az egyirányú, mind a kétirányú adatkötés lehetséges a komponens osztályban [fxLayout]="az elrendezés iránya". Ez nagyobb kontrollt biztosít az elrendezések felépítésében, és a dinamikus használati esetek is kezelhetők.

Az Angular alkalmazások a Node.js-t használják futtatókörnyezetként. Ha szeretnél többet megtudni a Node.js-ről és arról, hogyan telepíthetsz Node.js alkalmazásokat Docker-en, tekintsd meg a Hogyan telepítsünk Node.js (Express.js) alkalmazást Dockerrel Ubuntu 20.04-en útmutatónkat. Ha szeretnél többet megtudni az Angularról, tekintsd meg a Navigáció RouterLink, Navigate és NavigateByUrl segítségével az Angular Routerben.

Kellemes kódolást!

Hark Labs

Szerző · CloudSigma

Preslav Dobrev a CloudSigma kreatív tervezője, aki hagyományos és innovatív marketingcsatornák segítségével következetes vállalati identitás kialakítására összpontosít. Kiemelkedően képes ötvözni a művészi látásmódot a stratégiai marketinggel, hogy hatásos márkatörténeteket hozzon létre.

Flex Layout implementálása Angularban: Útmutató

Bevezetés

Előfeltételek

Projekt konfiguráció

A Flex Layout létrehozása

Összegzés

Hark Labs

Hozzászólások