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

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

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

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

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

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

1	# create a new Angular project under the name responsive-angular-material
2	ng new registration-login-angular-material

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

1	cd responsive-angular-material/
2
3	#install angular material
4	ng add @angular/material

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

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

1	# MyComponent is the name of your component
2	ng g component MyComponent

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

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

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

#registration component
ng g component RegistrationComponent

#login component
ng g component LoginComponent

إضافة موضوع

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

1	/style.css/
2	@import "~@angular/material/prebuilt-themes/indigo-pink.css";

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

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

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

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

<!--The content below is only a placeholder and can be replaced.-->
<mat-toolbar color="primary">
   <mat-toolbar-row>
     <!--  <span>HOME</span> -->
      <span><a href="/">HOME</a></span>
      <span class="spacer"></span>
      <a mat-button routerLink="/register">Register</a>
      <a mat-button routerLink="/login">Login</a>
   </mat-toolbar-row>
</mat-toolbar>

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

1	.spacer {
2	flex: 1 1 auto;
3	}

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

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

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

import { NgModule } from  '@angular/core';

import {MatButtonModule,MatToolbarModule} from  '@angular/material';


@NgModule({
imports: [MatButtonModule,MatToolbarModule],
exports: [MatButtonModule,MatToolbarModule],

})

export  class  MyMaterialModule { }

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

// app/app.module.ts
import { MyMaterialModule } from  './material.module';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MyMaterialModule,

  ],
})

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

navigation area with Register and Login links

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

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

import { RouterModule, Routes } from '@angular/router';

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MyMaterialModule,
    RouterModule.forRoot([
      { path: '', redirectTo: '/', pathMatch: 'full' },
      { path: 'register', component: RegistrationComponentComponent },
      { path: 'login', component: LoginComponentComponent },
      
    
    ]),

  ],

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

<!--The content below is only a placeholder and can be replaced.-->
<mat-toolbar color="primary">
   <mat-toolbar-row>
     <!--  <span>HOME</span> -->
      <span><a href="/">HOME</a></span>
      <span class="spacer"></span>
      <a  mat-button  routerLink="/register">Register</a>
      <a  mat-button  routerLink="/login">Login</a>
   </mat-toolbar-row>
</mat-toolbar>
<router-outlet></router-outlet>

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

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

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

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

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

import { NgModule } from  '@angular/core';
import {MatNativeDateModule,MatDatepickerModule,MatIconModule,MatButtonModule,MatCheckboxModule, MatToolbarModule, MatCardModule,MatFormFieldModule,MatInputModule,MatRadioModule,MatListModule,} from  '@angular/material';
import {MatDatepickerModule} from  '@angular/material/datepicker';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
imports: [MatNativeDateModule,MatDatepickerModule,MatIconModule,MatButtonModule,MatCheckboxModule, MatToolbarModule,FormsModule, MatCardModule,MatFormFieldModule,MatInputModule,MatListModule,MatRadioModule,],

exports: [MatNativeDateModule,FormsModule,
MatDatepickerModule,MatIconModule,MatButtonModule,MatCheckboxModule, MatToolbarModule, MatCardModule,MatFormFieldModule,MatInputModule,MatListModule,MatRadioModule,],

})

export  class  MyMaterialModule { }

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

<mat-toolbar>
   <span>Registration</span>
</mat-toolbar>
<mat-card class="my-card">
   <mat-card-content>
       
     <!-- CONTENT HERE -->
       
   </mat-card-content>
   <mat-card-actions>
     <!-- REGISTER BUTTON -->
   </mat-card-actions>
</mat-card>

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

 <mat-toolbar>
  <span>Registration</span>
</mat-toolbar>
<mat-card class="my-card">
   <mat-card-content>
      <form class="my-form">
        <!--FORM FIELDS HERE-->
      </form>
   </mat-card-content>
   <mat-card-actions>
      <!--REGISTER BUTTON HERE-->
   </mat-card-actions>
</mat-card>

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

<mat-card-content>
  <form class="my-form">
     <mat-form-field class="full-width">
            <mat-label>First Name</mat-label>
            <input  matInput  placeholder="First name"  name="fname"  required>
         </mat-form-field>
         <mat-form-field class="full-width">
            <mat-label>Last Name</mat-label>
            <input  matInput  placeholder="Last Name" name="lname"  required>
         </mat-form-field>
         <mat-form-field class="full-width">
            <mat-label>Address</mat-label>
            <input  matInput  placeholder="Address" name="address"  required>
         </mat-form-field>
         <mat-form-field class="full-width">
            <mat-label>Email</mat-label>
            <input  matInput  placeholder="Email" name="email">
         </mat-form-field>
         <mat-form-field class="full-width">
            <mat-label>Password</mat-label>
            <input  matInput  placeholder="Password"  name="password">
         </mat-form-field>
  </form>
</mat-card-content>

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

 <section class="example-section">
      <label class="example-margin">Gender:</label>
      <mat-radio-group [(ngModel)]="gender">
        <mat-radio-button class="example-margin" value="after">Male</mat-radio-button>
        <mat-radio-button class="example-margin" value="before">Female</mat-radio-button>
        <mat-radio-button class="example-margin" value="before">Other</mat-radio-button>
      </mat-radio-group>
    </section>

    <mat-form-field>
      <mat-label>Date of Birth</mat-label>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

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

<mat-card-content>
  <form class="my-form">
     <!--FORM FIELDS--> 
  </form>
</mat-card-content>
<mat-card-actions>
  <button mat-raised-button (click)="register()" color="primary">REGISTER</button>
</mat-card-actions>

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

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

.my-form{
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.full-width {
  width: 100%;
}

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

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

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

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

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

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

<mat-toolbar>
  <span>LOGIN</span>
</mat-toolbar>
<mat-card class="my-card">
   <mat-card-content>
      <form class="my-form">
         <mat-form-field class="full-width">
            <mat-label>Email</mat-label>
            <input  matInput  placeholder="Email" name="email">
         </mat-form-field>
         <mat-form-field class="full-width">
            <mat-label>Password</mat-label>
            <input  matInput  placeholder="Password" name="password">
         </mat-form-field>
      </form>
   </mat-card-content>
   <mat-card-actions>
      <button mat-raised-button (click)="login()" color="primary">LOGIN</button>
   </mat-card-actions>
</mat-card>

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

الاستنتاج

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