Angular'da Flex Layout Uygulama: Nasıl Yapılır Kılavuzu

Hark Labs2022-05-12 · 12 min read

Angular'da Flex Layout Uygulama: Nasıl Yapılır Kılavuzu

Giriş

CSS Flex Layout esnek akıcı düzenler oluşturmak için kullanılır. Ancak, Angular kullanırken düzenler üzerinde daha dinamik kontrole ihtiyaç duyduğumuz senaryolar vardır. Ayrıca, CSS Flexbox kullanmak, birçok geliştirici için zor olabilecek karmaşık stillendirme gerektirir. Flex Layout, bu sorunu çözmeyi amaçlayan bir bileşen motorudur. Uygulamalarınızda uygulanabilecek bir dizi direktif sağlar.

Flex Layout, Typescript kullanır ve bu da onu Angular uygulamaları için ideal hale getirir. Harici stil sayfalarına gerek yoktur ve duyarlı düzenler oluşturmak için farklı direktifler kullanılabilir. Bu eğitimde, basit bir Angular uygulaması oluşturacağız ve bileşenlerimizi düzenlemek için Flex Layout enjekte edeceğiz.

Hadi başlayalım!

Gereksinimler

Angular uygulamaları Node.js çalışma zamanını kullanır. Bu eğitimi tamamlamak için geliştirme makinenizde Node.js'in kurulu olması gerekir. Node.js'i kolayca kurmanıza yardımcı olacak eksiksiz bir kılavuzumuz var: Ubuntu 18.04 Üzerine Node.js Nasıl Kurulur size yardımcı olacaktır.
Ayrıca, Angular bileşenlerini kullanma ve bir Angular projesi kurma konusunda biraz aşinalığınız olması gerekir..

Proje Yapılandırması

Burada iki adımı gerçekleştirmemiz gerekiyor:

Yeni bir Angular uygulaması kurmamız gerekiyor.
Uygulamamızda içe aktarıp kullanabilmek için Flex Layout'u npx üzerinden yüklememiz gerekecek.

Yeni bir Angular uygulaması oluşturmak için terminalinizi açın ve aşağıdaki komutu çalıştırın:

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

Burada, @angular/cli kullanarak yeni bir Angular uygulaması oluşturuyoruz. Uygulamamızın adı angular-flex-example. Stil olarak Sass veya Less yerine CSS kullanacağız. Ek olarak, yönlendirmeye (routing) ihtiyacımız olmadığını belirteceğiz. Testlerle de ilgilenmiyoruz, bu yüzden onları da atlıyoruz.

Artık uygulamanız hazır olduğuna göre, uygulama dizinine gidin ve Flex Layout'u yüklemek için aşağıdaki komutu çalıştırın:

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

Yukarıdaki komut kurulumu tamamladıktan sonra, FlexLayoutModule'ü içe aktarmak için uygulama modülünüze aşağıdaki kodu ekleyin::

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

Ardından, her şeyin beklendiği gibi çalıştığından emin olmak için aşağıdaki komutu çalıştırın:

npm start

npm start

Uygulamanız varsayılan olarak localhost:4200 üzerinde sunulacaktır. Web tarayıcısında bu URL'ye gidin. Şu mesajı göreceksiniz: “angular-flex-example is running!. Bu kurulum tamamlandığına göre, Flex Layout kullanarak şablonumuzu tasarlayalım.

Flex Layout'u Oluşturun

Burada, app.component.html dosyasında Flex Layout'u FlexLayoutModule ile kullanmak için kod ekleyeceğiz. Nihai sonucumuz aşağıdaki şekle benzer olacaktır:

Yukarıdaki sonucu elde etmek için editörünüzde app.component.css dosyasını açın ve aşağıdaki kod satırlarını ekleyin:

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

}

Yukarıdaki kodu ekledikten sonra, app.component.html dosyasını açın ve aşağıdaki kodu ekleyin. Bu kodda iki adet container divs ve beş adet iç div bulunur:

<div class="container">
    <div class="item item-1">
    Öğe 1
    </div>
    
    <div class="item item-2">
    Öğe 2
    </div>
    
    <div class="item item-3">
    Öğe 3
    </div>

</div>

<div class="container">
    <div class="item item-4">
    Öğe 4
    </div>
    
    <div class="item item-5">
    Öğe 5
    </div>

</div>

Öğe 1

</div>

Öğe 2

</div>

Öğe 3

</div>

Öğe 4

</div>

Öğe 5

</div>

Bundan sonra, uygulamanızı derleyin ve çalıştırın. Şimdiye kadar herhangi bir düzen sağlamadığımız için üst üste yığılmış beş div göreceksiniz. fxLayout eklemek için aşağıdaki kodu ekleyin:

<div class="container" fxLayout>
    <div class="item item-1">
    Öğe 1
    </div>

    <div class="item item-2">
    Öğe 2
    </div>

    <div class="item item-3">
    Öğe 3
    </div>

</div>

<div class="container" fxLayout>

    <div class="item item-4">
    Öğe 4
    </div>
   
    <div class="item item-5">
    Öğe 5
    </div>

</div>

Öğe 1

</div>

Öğe 2

</div>

Öğe 3

</div>

Öğe 4

</div>

Öğe 5

</div>

Yukarıdaki kodda, bu fxLayout uygulandıktan sonra, display:flex ve flex-direction:row CSS özellikleri stilleri, container div'e uygulanırs. Şimdi uygulamayı çalıştırdığınızda, ilk satırda üç div ve alt satırda iki div elde edeceksiniz.

Ardından, fxLayoutAlign ve fxLayoutGap ekleyerek düzenimizi geliştiriyoruz:

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

    <div class="item item-2">
    Öğe 2
    </div>

    <div class="item item-3">
    Öğe 3
    </div>

</div>

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

    <div class="item item-5">
    Öğe 5
    </div>
</div>

Öğe 1

</div>

Öğe 2

</div>

Öğe 3

</div>

Öğe 4

</div>

Öğe 5

</div>

Bu, kapsayıcı place-content: stretch center ve align-items: stretch stillerini div öğesine uygulayacaktır. Ayrıca esnek öğeler arasında 10px boşluk uygulayacaktır.

Artık fxLayout uyguladığımıza göre, düzenimizi duyarlı hale getirmenin zamanı geldi:

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

    <div class="item item-3">
    Öğe 3
    </div>

</div>

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

    <div class="item item-5">
    Öğe 5
    </div>
</div>

Öğe 1

</div>

Öğe 2

</div>

Öğe 3

</div>

Öğe 4

</div>

Öğe 5

</div>

Bu kod, ekstra küçük xs ekranlar için kesme noktasını ayarlayacaktır. Ekran, düzeni varsayılan satırdan sütuna değiştirecek ve boşluk boyutu ekstra küçük ekranlarda “10px” değerinden “0px” değerine düşecektir. Bunu, uygulamayı çalıştırıp pencereyi xs boyutuna (genişliği 599px değerinden az olacak şekilde) yeniden boyutlandırarak test edebilirsiniz. Stilin değiştiğini gözlemleyeceksiniz.

Çeşitli ekran boyutları için farklı son eklerimiz vardır:

sm – küçük
md – orta
lg – büyük
xl – ekstra büyük

Alt öğeler için de direktiflerimiz var. Aşağıdaki kodda olduğu gibi fxFlex ekleyin:

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

    <div class="item item-2" fxFlex="20%">
        Öğe 2
    </div>

    <div class="item item-3" fxFlex>
        Öğe 3
    </div>

</div>

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

    <div class="item item-4" fxFlex>
        Öğe 4
    </div>
    
    <div class="item item-5" fxFlex="200px">
        Öğe 5
    </div>

</div>

Öğe 1

</div>

Öğe 2

</div>

Öğe 3

</div>

Öğe 4

</div>

Öğe 5

</div>

Bu, yerleşime flex-grow: 1, flex-shrink: 1, ve flex-basis: 100% uygulayacaktır. Genişlik değerini belirtirseniz, max-width özelliğini uygulayacaktır.

Hadi fxFlexOrder ve fxFlexOffset ekleyelim:

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

    <div class="item item-1" fxFlex="15%">
    Öğe 1
    </div>

    <div class="item item-2" fxFlex="20%" fxFlexOrder="3">
    Öğe 2
    </div>

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

    <div class="item item-5" fxFlex="200px">
    Öğe 5
    </div>

</div>

Öğe 1

</div>

Öğe 2

</div>

Öğe 3

</div>

Öğe 4

</div>

Öğe 5

</div>

Bu kodu kullanarak order: 3 özelliğini ikinci öğeye uyguladık. Bu ayrıca dördüncü öğe için margin-left: 50px yapacaktır. Şimdi uygulamayı çalıştırırsanız, dördüncü öğe başlangıçtan itibaren 30px boşluk alırken ikinci öğenin satırın üçüncü konumunda olduğunu göreceksiniz.

Özetlemek Gerekirse

Bu eğitimde, Angular uygulamalarında Flex Layout'un nasıl uygulanacağını öğrendik. Stilleri kendimiz kodlamak zorunda kalmadan kullanıma hazır Flexbox CSS düzenlerini kullanabileceğimiz için bu çok yararlı olacak. Daha fazla bilgiye ihtiyacınız varsa, GitHub sayfasındaki Flex Layout Wiki kısmına göz atın.

Bu eğitimde işleri basit tutmak için bileşen sınıfında değerleri bağlamak için binding kullanmadık. Ancak, bileşen sınıfında hem tek yönlü hem de çift yönlü binding mümkündür [fxLayout]="düzen yönünüz". Bu, düzenler oluşturmak için size daha fazla kontrol sağlayacak ve dinamik kullanım durumları yönetilebilecektir.

Angular uygulamaları çalışma zamanı olarak Node.js kullanır. Node.js ve Node.js uygulamalarının Docker üzerinde nasıl dağıtılacağı hakkında daha fazla bilgi edinmek isterseniz, şu Ubuntu 20.04 üzerinde Docker ile Node.js (Express.js) Uygulaması Nasıl Dağıtılır eğitimimize göz atın. Angular hakkında daha fazla bilgi edinmek için şu eğitimimize göz atın: Angular Router'da RouterLink, Navigate ve NavigateByUrl ile Gezinme.

Keyifli Kodlamalar!

Hark Labs

Yazar · CloudSigma

Preslav Dobrev, CloudSigma'da Kreatif Tasarımcı olarak görev yapmakta olup geleneksel ve yenilikçi pazarlama kanallarını kullanarak tutarlı bir kurumsal kimlik oluşturmaya odaklanmaktadır. Sanatsal vizyonu stratejik pazarlamayla harmanlayarak etkili marka anlatıları oluşturma konusunda oldukça yeteneklidir.

Angular'da Flex Layout Uygulama: Nasıl Yapılır Kılavuzu

Giriş

Gereksinimler

Proje Yapılandırması

Flex Layout'u Oluşturun

Özetlemek Gerekirse

Hark Labs

Yorumlar