Implementacja Flex Layout w Angularze: Przewodnik

Hark Labs2022-05-12 · 12 min read

Implementacja Flex Layout w Angularze: Przewodnik

Wprowadzenie

CSS Flex Layout służy do tworzenia elastycznych, płynnych układów. Jednak podczas korzystania z Angular istnieją scenariusze, w których potrzebujemy bardziej dynamicznej kontroli nad układami. Ponadto używanie CSS Flexbox wymaga skomplikowanego stylowania, co może być trudne dla wielu programistów. Flex Layout to silnik komponentów, który ma na celu rozwiązanie tego problemu. Udostępnia on zestaw dyrektyw, które można zaimplementować w swoich aplikacjach.

Flex Layout używa Typescript co czyni go idealnym dla aplikacji Angular. Nie są wymagane żadne zewnętrzne arkusze stylów, a do tworzenia responsywnych układów można używać różnych dyrektyw. W tym samouczku utworzymy prostą aplikację Angular i wstrzykniemy Flex Layout, aby rozmieścić nasze komponenty.

Zacznijmy!

Wymagania wstępne

Aplikacje Angular używają środowiska uruchomieniowego Node.js . Aby ukończyć ten samouczek, musisz mieć zainstalowany Node.js na swojej maszynie programistycznej. Mamy kompletny przewodnik Jak zainstalować Node.js na Ubuntu 18.04 który pomoże Ci łatwo skonfigurować Node.js.
Będziesz także potrzebować pewnej znajomości używania komponentów Angular oraz konfigurowania projektu Angular.

Konfiguracja projektu

Tutaj musimy wykonać dwa kroki:

Musimy skonfigurować nową aplikację Angular.
Będziemy musieli zainstalować Flex Layout z npx abyśmy mogli go zaimportować i użyć w naszej aplikacji.

Aby utworzyć nową aplikację Angular, otwórz terminal i uruchom poniższe polecenie:

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

Tutaj tworzymy nową aplikację Angular za pomocą @angular/cli. Nazwa naszej aplikacji to angular-flex-example. Jako stylowania będziemy używać CSS, a nie Sass lub Less. Dodatkowo określimy, że nie potrzebujemy routingu. Nie interesują nas również testy, więc je również pomijamy.

Nowat, gdy Twoja aplikacja jest gotowa, przejdź do katalogu aplikacji i uruchom poniższe polecenie, aby zainstalować 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 zakończeniu instalacji przez powyższe polecenie, dodaj poniższy kod w module aplikacji, aby zaimportować 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 { }

Następnie uruchom poniższe polecenie, aby upewnić się, że wszystko działa zgodnie z oczekiwaniami:

npm start

npm start

Twoja aplikacja będzie domyślnie serwowana pod adresem localhost:4200 . Przejdź pod ten adres URL w przeglądarce internetowej. Zobaczysz komunikat: “angular-flex-example is running!. Po zakończeniu tej konfiguracji zaprojektujmy nasz szablon przy użyciu Flex Layout.

Utwórz Flex Layout

Tutaj dodamy kod w app.component.html aby użyć Flex Layout z FlexLayoutModule. Nasz ostateczny wynik będzie podobny do poniższego rysunku:

Aby osiągnąć powyższy wynik, otwórz app.component.css w swoim edytorze i dodaj poniższe linie kodu:

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

}

Po dodaniu powyższego kodu otwórz plik app.component.html i dodaj następujący kod. Ten kod zawiera dwa kontenery div i pięć wewnętrznych divów:

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

</div>

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

</div>

Element 1

</div>

Element 2

</div>

Element 3

</div>

Element 4

</div>

Element 5

</div>

Następnie skompiluj i uruchom aplikację. Zobaczysz pięć elementów div ułożonych jeden na drugim, ponieważ do tej pory nie zdefiniowaliśmy żadnego układu. Aby dodać fxLayout dodaj poniższy kod:

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

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

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

</div>

<div class="container" fxLayout>

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

</div>

Element 1

</div>

Element 2

</div>

Element 3

</div>

Element 4

</div>

Element 5

</div>

W powyższym kodzie, po zastosowaniu fxLayout, właściwości CSS display:flex oraz flex-direction:row zostaną zastosowane do kontenera divs. Teraz, gdy uruchomisz aplikację, będziesz mieć trzy elementy div w pierwszym rzędzie i dwa elementy div w dolnym rzędzie.

Następnie dodajemy fxLayoutAlign oraz fxLayoutGap aby ulepszyć nasz układ:

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

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

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

</div>

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

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

Element 1

</div>

Element 2

</div>

Element 3

</div>

Element 4

</div>

Element 5

</div>

To zastosuje place-content: stretch center oraz align-items: stretch style do kontenera div. Zastosuje również 10px odstępu między elementami flex.

Teraz, gdy zastosowaliśmy fxLayout, czas uczynić nasz układ responsywnym:

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

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

</div>

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

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

Element 1

</div>

Element 2

</div>

Element 3

</div>

Element 4

</div>

Element 5

</div>

Ten kod ustawi punkt przerwania (breakpoint) dla bardzo małych xs ekranów. Ekran zmieni układ z domyślnego wiersza (row) na kolumnę (column), a rozmiar odstępu zmniejszy się z “10px” do “0px” na bardzo małych ekranach. Możesz to przetestować, uruchamiając aplikację i zmieniając rozmiar okna do xs (mniej niż 599px szerokości). Zaobserwujesz zmianę stylizacji.

Dla różnych rozmiarów ekranów mamy różne przyrostki:

sm – mały
md – średni
lg – duży
xl – bardzo duży

Mamy również dyrektywy dla elementów podrzędnych. Dodaj fxFlex jak w poniższym kodzie:

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

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

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

</div>

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

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

</div>

Element 1

</div>

Element 2

</div>

Element 3

</div>

Element 4

</div>

Element 5

</div>

To zastosuje flex-grow: 1, flex-shrink: 1, oraz flex-basis: 100% do układu. Jeśli określisz wartość szerokości, zastosuje to właściwość max-width.

Dodajmy fxFlexOrder oraz fxFlexOffset:

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

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

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

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

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

</div>

Element 1

</div>

Element 2

</div>

Element 3

</div>

Element 4

</div>

Element 5

</div>

Używając tego kodu, zastosowaliśmy order: 3 do drugiego elementu. Spowoduje to również ustawienie margin-left: 50px dla czwartego elementu. Teraz, po uruchomieniu aplikacji, zobaczysz, że drugi element znajduje się na trzeciej pozycji w rzędzie, podczas gdy czwarty element ma 30px odstępu od początku.

Podsumowanie

W tym samouczku dowiedzieliśmy się, jak zaimplementować Flex Layout w aplikacjach Angular. Będzie to pomocne, ponieważ będziemy mogli korzystać z gotowych układów Flexbox CSS bez konieczności samodzielnego kodowania stylów. Jeśli potrzebujesz więcej informacji, zapoznaj się z Flex Layout Wiki na stronie GitHub.

Aby zachować prostotę w tym samouczku, nie użyliśmy wiązania do powiązania wartości w klasie komponentu. Jednak zarówno jednokierunkowe, jak i dwukierunkowe wiązanie jest możliwe w klasie komponentu [fxLayout]="twój kierunek układu". Da Ci to większą kontrolę nad budowaniem układów i pozwoli na obsługę dynamicznych przypadków użycia.

Aplikacje Angular używają Node.js jako środowiska uruchomieniowego. Jeśli chcesz dowiedzieć się więcej o Node.js i o tym, jak wdrażać aplikacje Node.js na Dockerze, zapoznaj się z naszym Jak wdrożyć aplikację Node.js (Express.js) za pomocą Dockera na Ubuntu 20.04Aby dowiedzieć się więcej o Angularze, zapoznaj się z naszym samouczkiem Nawigacja za pomocą RouterLink, Navigate i NavigateByUrl w Angular Router.

Miłego kodowania!

Hark Labs

Autor · CloudSigma

Preslav Dobrev jest projektantem kreatywnym w CloudSigma, skupiającym się na spójnej tożsamości biznesowej przy wykorzystaniu tradycyjnych i innowacyjnych kanałów marketingowych. Biegle łączy wizję artystyczną ze strategicznym marketingiem, tworząc wywierające wpływ narracje marki.

Implementacja Flex Layout w Angularze: Przewodnik

Wprowadzenie

Wymagania wstępne

Konfiguracja projektu

Utwórz Flex Layout

Podsumowanie

Hark Labs

Komentarze