Υλοποίηση του Flex Layout στο Angular: Ένας οδηγός βήμα προς βήμα

Hark Labs2022-05-12 · 13 min read

Υλοποίηση του Flex Layout στο Angular: Ένας οδηγός βήμα προς βήμα

Εισαγωγή

CSS Flex Layout χρησιμοποιείται για τη δημιουργία ευέλικτων ρευστών διατάξεων. Ωστόσο, κατά τη χρήση του Angular υπάρχουν σενάρια όπου χρειαζόμαστε πιο δυναμικό έλεγχο των διατάξεων. Επιπλέον, η χρήση του CSS Flexbox απαιτεί πολύπλοκη μορφοποίηση που μπορεί να είναι δύσκολη για πολλούς προγραμματιστές. Το Flex Layout είναι μια μηχανή στοιχείων που στοχεύει στην επίλυση αυτού του προβλήματος. Παρέχει ένα σύνολο οδηγιών που είναι διαθέσιμες για υλοποίηση στις εφαρμογές σας.

Το Flex Layout χρησιμοποιεί Typescript καθιστώντας το ιδανικό για εφαρμογές Angular. Δεν απαιτούνται εξωτερικά φύλλα στυλ και μπορούν να χρησιμοποιηθούν διαφορετικές οδηγίες για τη δημιουργία προσαρμόσιμων διατάξεων. Σε αυτόν τον οδηγό, θα δημιουργήσουμε μια απλή εφαρμογή Angular και θα εισαγάγουμε το Flex Layout για να διευθετήσουμε τα στοιχεία μας.

Ας ξεκινήσουμε!

Προαπαιτούμενα

Οι εφαρμογές Angular χρησιμοποιούν το περιβάλλον εκτέλεσης Node.js. Για να ολοκληρώσετε αυτόν τον οδηγό, θα πρέπει να έχετε εγκατεστημένο το Node.js στο μηχάνημα ανάπτυξής σας. Έχουμε έναν πλήρη οδηγό Πώς να εγκαταστήσετε το Node.js στο Ubuntu 18.04 που θα σας βοηθήσει να εγκαταστήσετε το Node.js εύκολα.
Θα πρέπει επίσης να έχετε κάποια εξοικείωση με τη χρήση στοιχείων Angular και τη δημιουργία ενός έργου Angular.

Ρύθμιση παραμέτρων έργου

Εδώ πρέπει να εκτελέσουμε δύο βήματα:

Πρέπει να δημιουργήσουμε μια νέα εφαρμογή Angular.
Θα χρειαστεί να εγκαταστήσουμε το Flex Layout από το npx ώστε να μπορούμε να το εισαγάγουμε και να το χρησιμοποιήσουμε στην εφαρμογή μας.

Για να δημιουργήσετε μια νέα εφαρμογή Angular, ανοίξτε το τερματικό σας και εκτελέστε την παρακάτω εντολή:

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

Εδώ δημιουργούμε μια νέα εφαρμογή Angular χρησιμοποιώντας το @angular/cli. Το όνομα της εφαρμογής μας είναι angular-flex-example. Θα χρησιμοποιήσουμε CSS αντί για Sass ή Less για τη μορφοποίηση. Επιπλέον, θα καθορίσουμε ότι δεν χρειαζόμαστε δρομολόγηση. Επίσης, δεν μας ενδιαφέρουν οι δοκιμές, οπότε τις παραλείπουμε και αυτές.

Τώρα που η εφαρμογή σας είναι έτοιμη, μεταβείτε στον κατάλογο της εφαρμογής και εκτελέστε την παρακάτω εντολή για να εγκαταστήσετε το 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

Μόλις η παραπάνω εντολή ολοκληρώσει την εγκατάσταση, προσθέστε τον παρακάτω κώδικα στο app module σας για να εισαγάγετε το 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 { }

Στη συνέχεια, εκτελέστε την παρακάτω εντολή για να βεβαιωθείτε ότι όλα λειτουργούν όπως αναμένεται:

npm start

npm start

Η εφαρμογή σας θα εξυπηρετείται στο localhost:4200 από προεπιλογή. Μεταβείτε σε αυτήν τη διεύθυνση URL στο πρόγραμμα περιήγησης ιστού. Θα δείτε το μήνυμα: “angular-flex-example is running!. Αφού ολοκληρωθεί αυτή η ρύθμιση, ας σχεδιάσουμε το πρότυπό μας χρησιμοποιώντας το Flex Layout.

Δημιουργία του Flex Layout

Εδώ θα προσθέσουμε κώδικα στο app.component.html για να χρησιμοποιήσουμε το Flex Layout με το FlexLayoutModule. Το τελικό μας αποτέλεσμα θα είναι παρόμοιο με την παρακάτω εικόνα:

Για να επιτύχετε το παραπάνω αποτέλεσμα, ανοίξτε το app.component.css στον επεξεργαστή σας και προσθέστε τις παρακάτω γραμμές κώδικα:

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

}

Τώρα που προσθέσατε τον παραπάνω κώδικα, ανοίξτε το app.component.html αρχείο και προσθέστε τον ακόλουθο κώδικα. Αυτός ο κώδικας έχει δύο container divs και πέντε εσωτερικά divs:

<div class="container">
    <div class="item item-1">
    Στοιχείο 1
    </div>
    
    <div class="item item-2">
    Στοιχείο 2
    </div>
    
    <div class="item item-3">
    Στοιχείο 3
    </div>

</div>

<div class="container">
    <div class="item item-4">
    Στοιχείο 4
    </div>
    
    <div class="item item-5">
    Στοιχείο 5
    </div>

</div>

Στοιχείο 1

</div>

Στοιχείο 2

</div>

Στοιχείο 3

</div>

Στοιχείο 4

</div>

Στοιχείο 5

</div>

Μετά από αυτό, μεταγλωττίστε και εκτελέστε την εφαρμογή σας. Θα δείτε πέντε div στοιβαγμένα το ένα πάνω στο άλλο επειδή δεν έχουμε ορίσει κάποια διάταξη μέχρι τώρα. Για να προσθέσετε το fxLayout προσθέστε τον παρακάτω κώδικα:

<div class="container" fxLayout>
    <div class="item item-1">
    Στοιχείο 1
    </div>

    <div class="item item-2">
    Στοιχείο 2
    </div>

    <div class="item item-3">
    Στοιχείο 3
    </div>

</div>

<div class="container" fxLayout>

    <div class="item item-4">
    Στοιχείο 4
    </div>
   
    <div class="item item-5">
    Στοιχείο 5
    </div>

</div>

Στοιχείο 1

</div>

Στοιχείο 2

</div>

Στοιχείο 3

</div>

Στοιχείο 4

</div>

Στοιχείο 5

</div>

Στον παραπάνω κώδικα, μετά την εφαρμογή αυτού του fxLayout, οι ιδιότητες CSS display:flex και flex-direction:row στυλ εφαρμόζονται στο container divs. Τώρα όταν εκτελείτε την εφαρμογή, θα έχετε τρία divs στην πρώτη σειρά και δύο divs στην κάτω σειρά.

Στη συνέχεια, προσθέτουμε fxLayoutAlign και fxLayoutGap για να βελτιώσουμε τη διάταξή μας:

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
    <div class="item item-1">
    Στοιχείο 1
    </div>

    <div class="item item-2">
    Στοιχείο 2
    </div>

    <div class="item item-3">
    Στοιχείο 3
    </div>

</div>

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">  
    <div class="item item-4">
    Στοιχείο 4
    </div>

    <div class="item item-5">
    Στοιχείο 5
    </div>
</div>

Στοιχείο 1

</div>

Στοιχείο 2

</div>

Στοιχείο 3

</div>

Στοιχείο 4

</div>

Στοιχείο 5

</div>

Αυτό θα εφαρμόσει place-content: stretch center και align-items: stretch στυλ στο container div. Θα εφαρμόσει επίσης 10px χώρου μεταξύ των στοιχείων flex.

Τώρα που έχουμε εφαρμόσει fxLayout, ήρθε η ώρα να κάνουμε τη διάταξή μας responsive:

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-1">
    Στοιχείο 1
    </div>
    
    <div class="item item-2">
    Στοιχείο 2
    </div>

    <div class="item item-3">
    Στοιχείο 3
    </div>

</div>

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-4">
    Στοιχείο 4
    </div>

    <div class="item item-5">
    Στοιχείο 5
    </div>
</div>

Στοιχείο 1

</div>

Στοιχείο 2

</div>

Στοιχείο 3

</div>

Στοιχείο 4

</div>

Στοιχείο 5

</div>

Αυτός ο κώδικας θα ορίσει το breakpoint για τις πολύ μικρές xs οθόνες. Η οθόνη θα αλλάξει τη διάταξη από την προεπιλεγμένη σειρά (row) σε στήλη (column) και το μέγεθος του κενού θα μειωθεί από “10px” σε “0px” στις πολύ μικρές οθόνες. Μπορείτε να το δοκιμάσετε αυτό εκτελώντας την εφαρμογή και αλλάζοντας το μέγεθος του παραθύρου σε xs (λιγότερο από 599px πλάτος). Θα παρατηρήσετε ότι η μορφοποίηση αλλάζει.

Για διάφορα μεγέθη οθόνης έχουμε διαφορετικές καταλήξεις:

sm – μικρό
md – μεσαίο
lg – μεγάλο
xl – πολύ μεγάλο

Έχουμε επίσης οδηγίες (directives) για θυγατρικά στοιχεία. Προσθέστε fxFlex όπως στον παρακάτω κώδικα:

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-1" fxFlex="15%">
        Στοιχείο 1
    </div>

    <div class="item item-2" fxFlex="20%">
        Στοιχείο 2
    </div>

    <div class="item item-3" fxFlex>
        Στοιχείο 3
    </div>

</div>

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

    <div class="item item-4" fxFlex>
        Στοιχείο 4
    </div>
    
    <div class="item item-5" fxFlex="200px">
        Στοιχείο 5
    </div>

</div>

Στοιχείο 1

</div>

Στοιχείο 2

</div>

Στοιχείο 3

</div>

Στοιχείο 4

</div>

Στοιχείο 5

</div>

Αυτό θα εφαρμόσει flex-grow: 1, flex-shrink: 1, και flex-basis: 100% στη διάταξη. Εάν καθορίσετε την τιμή πλάτους, θα εφαρμόσει την ιδιότητα max-width ιδιότητα.

Ας προσθέσουμε fxFlexOrder και fxFlexOffset:

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

    <div class="item item-1" fxFlex="15%">
    Στοιχείο 1
    </div>

    <div class="item item-2" fxFlex="20%" fxFlexOrder="3">
    Στοιχείο 2
    </div>

    <div class="item item-3" fxFlex>
    Στοιχείο 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">
    Στοιχείο 4
    </div>

    <div class="item item-5" fxFlex="200px">
    Στοιχείο 5
    </div>

</div>

Στοιχείο 1

</div>

Στοιχείο 2

</div>

Στοιχείο 3

</div>

Στοιχείο 4

</div>

Στοιχείο 5

</div>

Χρησιμοποιώντας αυτόν τον κώδικα εφαρμόσαμε order: 3 στο δεύτερο στοιχείο. Θα κάνει επίσης το margin-left: 50px στο τέταρτο στοιχείο. Τώρα, αν εκτελέσετε την εφαρμογή, θα δείτε ότι το δεύτερο στοιχείο βρίσκεται στην τρίτη θέση της σειράς, ενώ το τέταρτο στοιχείο λαμβάνει απόσταση 30px από την αρχή.

Σύνοψη

Σε αυτόν τον οδηγό, μάθαμε πώς να υλοποιούμε το Flex Layout σε εφαρμογές Angular. Αυτό θα είναι χρήσιμο καθώς θα μπορούμε να χρησιμοποιούμε έτοιμα προς χρήση Flexbox CSS layouts χωρίς να χρειάζεται να γράφουμε μόνοι μας τον κώδικα μορφοποίησης. Αν χρειάζεστε περισσότερες πληροφορίες, ανατρέξτε στο Flex Layout Wiki στη σελίδα του GitHub.

Για να κρατήσουμε τα πράγματα απλά σε αυτόν τον οδηγό, δεν χρησιμοποιήσαμε binding για τη σύνδεση τιμών στην component class. Ωστόσο, τόσο το μονόδρομο όσο και το αμφίδρομο binding είναι εφικτά στην component class [fxLayout]="την κατεύθυνση της διάταξής σας". Αυτό θα σας δώσει μεγαλύτερο έλεγχο για τη δημιουργία διατάξεων και τη διαχείριση δυναμικών περιπτώσεων χρήσης.

Οι εφαρμογές Angular χρησιμοποιούν το Node.js ως περιβάλλον εκτέλεσης. Αν θέλετε να μάθετε περισσότερα για το Node.js και πώς να αναπτύξετε εφαρμογές Node.js στο Docker, δείτε τον οδηγό μας Πώς να αναπτύξετε μια εφαρμογή Node.js (Express.js) με Docker σε Ubuntu 20.04 οδηγό. Για να μάθετε περισσότερα για το Angular, δείτε τον οδηγό μας Πλοήγηση με RouterLink, Navigate, και NavigateByUrl στο Angular Router.

Καλή συνέχεια!

Hark Labs

Συγγραφέας · CloudSigma

Ο Preslav Dobrev είναι Δημιουργικός Σχεδιαστής στην CloudSigma, με εστίαση στη συνεπή επιχειρηματική ταυτότητα μέσω παραδοσιακών και καινοτόμων καναλιών μάρκετινγκ. Διαθέτει την ικανότητα να συνδυάζει το καλλιτεχνικό όραμα με το στρατηγικό μάρκετινγκ για τη δημιουργία εντυπωσιακών αφηγήσεων επωνυμίας.

Υλοποίηση του Flex Layout στο Angular: Ένας οδηγός βήμα προς βήμα

Εισαγωγή

Προαπαιτούμενα

Ρύθμιση παραμέτρων έργου

Δημιουργία του Flex Layout

Σύνοψη

Hark Labs

Σχόλια