Cum se construiește un interfață de conectare cu un design unghiular și material

Acest tutorial vă va arăta cum să construiți un UI de autentificare și înregistrare frumos cu material unghiular. Ne vom uita la diferitele componente de proiectare a materialelor și la modul în care pot fi folosite pentru a crea aplicații profesionale. Codul complet al acestui tutorial poate fi găsit în repo-ul nostru GitHub.

Noțiuni de bază

Vom începe prin crearea unei aplicații Angulare. Sperăm că aveți deja Node.js și CLI Angular instalate în mediul dvs. de lucru.

Utilizați următoarea comandă pentru a crea o nouă aplicație Angular.

# creați un nou proiect Angular sub numele de răspuns-unghiular-ng nou-înregistrare-login-unghiular-material

Această comandă creează toate fișierele necesare pentru a încărca o aplicație Angular. Următorul pas va fi adăugarea unui material unghiular în aplicația dvs.. 

cd răspuns-unghiular-material / #instalați material unghiular ng adăugați @ unghiular / material

Crearea componentelor utilizând CLI unghiular

Componentele în unghiulare sunt elementele de bază ale aplicației. Deși puteți crea manual componente, CLI Angular face foarte ușor generarea automată a componentelor care conțin tot codul de pornire necesar. Pentru a genera o componentă în CLI unghiulară, purtați pur și simplu următoarea comandă:

#Componentul este numele componentului dvs. component Componentul MyComponent

Aplicația noastră va avea următoarele componente:

• Înregistrare component
• Logare component

Să generăm componentele acum.

# component de înregistrare ng component gComponent #login component ng g component LoginComponent

Adăugarea unei teme

Frumusețea materialului unghiular este că vine cu teme pre-construite, astfel încât să puteți începe cu ușurință apariția și simțul aplicației dvs. prin simpla conectare a unor fragmente simple de cod la aplicația dvs. Pentru a adăuga o temă, pur și simplu importați-o style.css.

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

Construirea UI

Vrem ca interfața dvs. utilizator să conțină o bară de navigare cu link-uri pentru înregistrare și conectare. Așadar, vom crea o bară de navigare cu două butoane care se leagă de componentele aplicației.

Pentru a crea o bară de instrumente și butoane, utilizați  și  componente.

Mergeți mai departe și adăugați codul HTML al interfeței UI în src / app / app.component.html. Rețineți că am adăugat, de asemenea, link-uri către rute.

    ACASĂ  Înregistrează-te  

Apoi, vom adăuga un stil la interfața noastră. Deschis app.component.css și adăugați următoarele stiluri CSS.

.spacer flex: 1 1 auto; 

Importul componentelor unghiulare

De asemenea, trebuie să importați modulele @ Unghiular / material. Puteți alege să le importați din modulul principal sau să creați un modul separat care să conțină toate modulele de proiectare a materialelor. Deoarece vom lucra cu multe dintre aceste module la crearea restului interfeței UI, vom crea un modul separat pentru toate componentele. Continuați și creați un fișier nou src / app / material.module.ts.

Adăugați modulele pentru  , , și  componente ale fișierului, după cum se arată mai jos.

import NgModule de la '@ angular / core'; import MatButtonModule, MatToolbarModule din '@ unghiular / material'; @NgModule (import: [MatButtonModule, MatToolbarModule], exporturi: [MatButtonModule, MatToolbarModule],) clasa de export MyMaterialModule 

Apoi, din alte componente din codul nostru, trebuie doar să includem modulul pe care tocmai l-am creat-app / app.module.ts-așa cum se arată mai jos.

// app / app.module.ts import MyMaterialModule din "./material.module"; @NgModule (importă: [BrowserModule, BrowserAnimationsModule, MyMaterialModule,],)

Eliberați ng servi comandați-vă pentru a testa aplicația dvs. și ar trebui să vedeți o zonă de navigare frumoasă Inregistreaza-te și Logare Link-uri.

Activați rutarea

Rutarea permite utilizatorilor să navigheze între diferite pagini. Pentru a permite rutarea în aplicația noastră, vom defini mai întâi configurația de rutare. Pentru aceasta, adăugați următorul cod la app.module.ts.

import RouterModule, Routes de la '@ unghiular / router'; importul: [BrowserModule, BrowserAnimationsModule, MyMaterialModule, RouterModule.forRoot ([path: ", redirectTo: '/', pathMatch: 'full', path: 'register', component: RegistrationComponentComponent , component: LoginComponentComponent,]),],

Următorul pas va fi să adăugați a  element care permite Routerului rotativ să știe unde să pună componentele dirijate. app.component.html fișierul ar trebui să arate astfel:

    ACASĂ  Înregistrează-te   

Am plasat ieșirea routerului astfel încât componentele să se afle sub bara de navigare.

UI de înregistrare

În această secțiune, vom utiliza, în principal, componentele și componentele de control ale formularului. Acest UI va prezenta aceste componente de design material:

• card () - un container de conținut pentru text, fotografii și acțiuni în contextul unui singur subiect
• etichetă () - utilizat pentru a specifica o etichetă pentru câmpul de formular
• componentă de intrare () - specifică un câmp de intrare
• formează o componentă de câmp () -pachetează mai multe componente unghiulare pentru a face un câmp de formă
• casetă de selectare () - casetă de selectare nativă cu stil de design îmbunătățit
• selecție de date () - un selector de date îmbunătățit

Dar, mai întâi, să le importăm src / app / material.ts.

import NgModule de la '@ angular / core'; import MatNativeDateModule, MatDatepickerModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatInputModule, MatRadioModule, MatListModule, din '@ unghiular / material'; import MatDatepickerModule de la '@ angle / material / datepicker'; import FormsModule, ReactiveFormsModule din '@ unghiular / formulare'; @NgModule (import: [MatNativeDateModule, MatDatepickerModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, FormsModule, MatCardModule, MatFormFieldModule, MatInputModule, MatListModule, MatRadioModule,], exporturi: [MatNativeDateModule, FormsModule, MatDatepickerModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatInputModule, MatListModule, MatRadioModule,],) clasa de export MyMaterialModule 

Vom începe cu , care va conține tot conținutul din interfața de înregistrare. Deschis Înregistrare-component.component.html și adăugați următorul cod.

 Înregistrare         

Apoi, vom adăuga un formular HTML în secțiunea de conținut care va conține toate câmpurile de formular.

  Înregistrare    
  
     

Apoi, vom adăuga câmpuri de formular pentru numele, prenumele, adresa, e-mailul și parola. Vom folosi  pentru a crea etichete și  pentru a crea câmpurile de introducere.

 
  Nume    Numele de familie    Adresa    E-mail    Parola   
 

Apoi, vom adăuga o căsuță de selectare pentru sex și un selector de date pentru data nașterii. Noi vom folosi  și  care au îmbunătățit stilul de design și animații.

 
 Sex:  Masculin Femeie Alte  
  Data de nastere    

Ultimul bit va fi un buton după  pentru trimiterea informațiilor despre utilizator.

 
  
   INREGISTREAZA-TE  

Formarea stilului

Să punem un stil pe formele noastre pentru a le face mai prezenți. Deschis creați-account.component.css și adăugați următoarele stiluri CSS.

.formularul meu min-width: 150px; max-lățime: 500px; lățime: 100%;  .plată-lățime lățime: 100%; 

UI de înregistrare va arăta astfel:

Construirea interfeței utilizator pentru componenta de conectare

UI-ul de conectare va avea următoarele componente:

• card () - un container de conținut pentru text, fotografii și acțiuni în contextul unui singur subiect
• componentă de intrare () - specifică un câmp de intrare

La fel ca și în cazul interfeței de înregistrare, vom avea o componentă a cărții Material pentru a găzdui formularul de autentificare.

Codul HTML pentru Logare este afișată o pagină care conține două intrări pentru acreditările de e-mail și parolă.

 LOGARE    
  E-mail    Parola   
   LOGARE  

UI-ul terminat va arăta astfel:

Concluzie

Acest tutorial a acoperit majoritatea componentelor Materialului Angular necesare pentru a realiza un UI pe deplin funcțional. După cum ați văzut, materialul unghiular este foarte ușor de utilizat, deoarece toate componentele au stiluri predefinite. Acest lucru înseamnă că puteți crea rapid UI frumoase. În plus, documentația Angular Material oferă o mulțime de exemple și este ușor de urmărit.