Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular 2+
Code

 كيفية بناء واجهة مستخدم تسجيل الدخول باستخدام التصميم الزاوي والمادي

by
Difficulty:BeginnerLength:ShortLanguages:

Arabic (العربية/عربي) translation by osamagaradh (you can also view the original English article)

هذا البرنامج التعليمي سوف نظهر لك كيفية بناء سجيل دخول جميل وتسجيل واجهة المستخدم مع مواد زاويية.  سننظر في مكونات تصميم المواد المختلفة وكيف يمكن استخدامها لتحقيق تطبيق ذا مظهر احترافي. يمكن العثور على الرمز الكامل لهذا البرنامج التعليمي في الريبو GitHub خاصتنا.

الشروع في العمل

وسوف نبدأ بإنشاء تطبيق زاويي. ونأمل أن لديك بالفعل Node.js ومؤشرها الزاويي مثبتة في بيئة العمل الخاصة بك.

استخدم الأمر التالي لإنشاء تطبيق زاوي جديد.

ينشئ هذا الأمر كافة الملفات المطلوبة لتطبيق زاوي bootstrap. سوف تكون الخطوة التالية لإضافة "المواد الزاوي" في التطبيق الخاص بك.

إنشاء مكونات باستخدام CLI الزاوي

 المكونات في Angular هي لبنات البناء للتطبيق. على الرغم من إمكانية إنشاء المكونات يدويًا ، إلا أن Angular CLI يجعل من السهل جدًا إنشاء مكونات تحتوي على كل شفرة البدء الضرورية تلقائيًا. لإنشاء عنصر في CLI الزاوي، يمكنك ببساطة تشغيل الأمر التالي:

وسيكون للتطبيق لدينا العناصر التالية:

  • مكون التسجيل
  • عنصر تسجيل الدخول

دعونا نولد تلك المكونات الآن.

إضافة موضوع

تكمن جمال Angular Material في أنها تأتي مع مظاهر مدمجة مسبقًا ، بحيث يمكنك بسهولة إضفاء مظهر وشكل التطبيق بسهولة عن طريق توصيل بعض مقتطفات الشفرة البسيطة إلى تطبيقك. لإضافة مظهر ، ما عليك سوى استيراده إلى style.css.

بناء واجهة المستخدم

نريد أن تحتوي واجهة المستخدم لدينا على شريط تنقل مع روابط للتسجيل وتسجيل الدخول. لذلك سننشئ شريط تنقل به زرين يرتبطان بمكونات التطبيق

لإنشاء شريط الأدوات والأزرار، يمكنك استخدام <mat-toolbar>و <mat-button>المكونات على التوالي.</mat-button> </mat-toolbar>

قم بالمضي قدما وإضافة التعليمات البرمجية ل HTML لواجهة المستخدم في src/app/app.component.html. لاحظ أننا أضفنا أيضا وصلات للطرق.

التالي،سوف نضيف بعض التصميم لواجهة المستخدم لدينا. قم بفتح app.component.css وبإضافة أنماط CSS التالية.

استيراد مكونات مادية زاويية

 تحتاج أيضًا إلى استيراد الوحدات النمطية من @ الزاوية / المادة. يمكنك اختيار استيرادها من الوحدة النمطية الرئيسية أو إنشاء وحدة منفصلة تحتوي على جميع وحدات التصميم المادية.  وبما أننا سنعمل مع العديد من هذه الوحدات عند إنشاء بقية واجهة المستخدم ، فسوف نقوم بإنشاء وحدة منفصلة لكل المكونات. امضي قدما في إنشاء ملف جديد src / app / material.module.ts.

أضف الوحدات النمطية لمكونات <mat-toolbar> و </ mat-toolbar-row> و <mat-button> في الملف كما هو موضح أدناه.

بعد ذلك ، بدءًا من المكونات الأخرى في الشفرة ، نحتاج فقط إلى تضمين الوحدة التي أنشأناها للتو — app / app.module.ts — كما هو موضح أدناه.

 قم بإصدار الأمر ng serve لاختبار طلبك ، ويجب أن تشاهد منطقة ملاحة لطيفة مع روابط تسجيل وتسجيل الدخول.

navigation area with Register and Login links

تمكين التوجيه

يتيح التوجيه للمستخدمين التنقل بين الصفحات المختلفة. لتمكين التوجيه في تطبيقنا ، سنحدد أولاً تكوين التوجيه. للقيام بذلك ، قم بإضافة التعليمة البرمجية التالية إلى app.module.ts.

ستكون الخطوة التالية هي إضافة عنصر <router-outlet> </ router-outlet> يمكّن جهاز التوجيه الزاوي من معرفة مكان وضع المكونات الموجهة. من المفترض أن يبدو الملف app.component.html كما يلي: 

لقد وضعنا منفذ جهاز التوجيه بحيث سيتم تقديم المكونات أسفل شريط التنقل.

تسجيل واجهة المستخدم

في هذا القسم ، سوف نستفيد بشكل أساسي من مكونات التحكم في التخطيط والنموذج. ستعرض واجهة المستخدم هذه مكونات التصميم:

  •  مكون البطاقة (<mat-card>) - حاوية محتوى للنص والصور والإجراءات في سياق موضوع واحد
  • عنصر التسمية (<mat-label>) – يستخدم لتحديد تسمية لحقل النموذج
  • (عنصر الإدخال<input matinput>) – يقم بتحديد حقل إدخال
  • مكون حقل النموذج (<mat-form-field>) – يلتف بالعديد من مكونات الزاوي لصنع حقل نموذج
  • مكونخانة الاختيار(<mat-checkbox>) – خانة اختيار أصلي مع تصميم مواد معزز
  • مكون منتقي التاريخ (<mat-datepicker>) – منتقي تاريخ معزز

ولكن أولاً، دعونا استيرادها في src/app/material.ts.

 سنبدأ بـ <mat-card> ، الذي سيحتوي على كل المحتوى في واجهة مستخدم التسجيل. افتح registration-component.component.html وأضف الشفرة التالية.

بعد ذلك ، سنقوم بإضافة نموذج HTML داخل قسم المحتوى الذي سيحتوي على جميع حقول النماذج لدينا.

 بعد ذلك ، سنقوم بإضافة حقول نموذج للاسم الأول واسم العائلة والعنوان والبريد الإلكتروني وكلمة المرور. سنستخدم <mat-label> لإنشاء تسميات و <input matInput /> لإنشاء حقول الإدخال.

 بعد ذلك ، سنضيف مربع اختيار للجنس ومنتقي التاريخ لتاريخ الميلاد. سوف نستخدم <mat-checkbox> و <mat-datepicker> التي قامت بتحسين تصميم المواد والتصاميم المتحركة.

ستكون آخر بت زر بعد </ mat-card-content> لإرسال معلومات المستخدم.

تصميم النموذج

دعونا نضع بعض التصميم على أشكالنا لجعلها أكثر جاذبية. افتح create-account.component.css وأضف أنماط CSS التالية.

ستبدو واجهة مستخدم التسجيل كما يلي

Registration UI layout

بناء واجهة المستخدم لمكون الدخول

ستحتوي واجهة مستخدم تسجيل الدخول على المكونات التالية

  • مكون البطاقة (<mat-card>) - حاوية محتوى للنص والصور والإجراءات في سياق موضوع واحد
  • (عنصر الإدخال<input matinput>) – يحدد حقل إدخال

تمامًا كما فعلنا مع واجهة المستخدم للتسجيل ، سيكون لدينا مكون بطاقة مادة لاستضافة نموذج تسجيل الدخول

يتم عرض كود HTML الخاص بصفحة تسجيل الدخول ، والذي يحتوي على مدخلين لبيانات اعتماد البريد الإلكتروني وكلمة المرور.

واجهة المستخدم النهائية ستبدو كهذا:

Finished login UI

الاستنتاج

يغطي هذا البرنامج التعليمي معظم مكونات المادة الزاويية اللازمة لإنشاء واجهة مستخدم تعمل بشكل كامل. كما رأيت ، فإن Angular Material سهلة الاستخدام للغاية نظرًا لأن جميع المكونات لها أنماط محددة مسبقًا هذا يعني أنه يمكنك بناء واجهات مستخدم جميلة بسرعة. بالإضافة إلى ذلك ، توفر وثائق المادة الزاويية الكثير من الأمثلة ويسهل متابعتها.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.