تطبيق Flex Layout في Angular: دليل إرشادي

Hark Labs2022-05-12 · 12 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

بمجرد أن ينتهي الأمر أعلاه من التثبيت، أضف الكود أدناه في وحدة التطبيق الخاصة بك لاستيراد 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 بشكل افتراضي. انتقل إلى هذا الرابط في متصفح الويب. ستظهر لك الرسالة: “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 وأضف الكود التالي. يحتوي هذا الكود على حاويتين من نوع 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 على حاوية الـ divs. الآن عند تشغيل التطبيق، سيكون لديك ثلاثة عناصر div في الصف الأول وعنصرا div في الصف السفلي.

بعد ذلك، نضيف fxLayoutAlign و fxLayoutGap لتحسين التخطيط الخاص بنا:

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

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

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

</div>

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

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

عنصر 1

</div>

عنصر 2

</div>

عنصر 3

</div>

عنصر 4

</div>

عنصر 5

</div>

سيؤدي هذا إلى تطبيق place-content: stretch center و align-items: stretch أنماط على حاوية div. كما سيقوم بتطبيق 10px من المساحة بين عناصر flex.

الآن بعد أن قمنا بتطبيق fxLayout، حان الوقت لجعل التخطيط الخاص بنا متجاوبًا:

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

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

</div>

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

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

عنصر 1

</div>

عنصر 2

</div>

عنصر 3

</div>

عنصر 4

</div>

عنصر 5

</div>

سيقوم هذا الكود بتعيين نقطة الانهيار للشاشات الصغيرة جدًا xs . ستغير الشاشة التخطيط من الصف الافتراضي إلى العمود وستقل مساحة الفجوة من “10px” إلى “0px” في الشاشات الصغيرة جدًا. يمكنك اختبار ذلك عن طريق تشغيل التطبيق وتغيير حجم النافذة إلى xs (أقل من 599px عرضًا). ستلاحظ تغير التنسيق.

بالنسبة لأحجام الشاشات المختلفة، لدينا لواحق مختلفة:

sm – صغيرة
md – متوسطة
lg – كبيرة
xl – كبيرة جدًا

لدينا أيضًا توجيهات للعناصر الفرعية. أضف 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 الجاهزة للاستخدام دون الحاجة إلى كتابة كود التنسيق بأنفسنا. إذا كنت بحاجة إلى مزيد من المعلومات، فراجع ويكي Flex Layout على صفحة GitHub.

لتبسيط الأمور في هذا الدرس التعليمي، لم نستخدم الربط لربط القيم في فئة المكون. ومع ذلك، فإن الربط أحادي الاتجاه وثنائي الاتجاه ممكن في فئة المكون [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

التعليقات