Ce este materialul unghiular și cum să îl implementez?

Componentele UI / UX din Angular sunt cunoscute sub numele de Materiale unghiulare. eiajuta aplicațiile angulare să funcționeze eficient . Cu toate acestea, dacă nu le cunoașteți încă, iată un articol care vă va ajuta să învățați detaliat materialele angulare. De asemenea, to Obțineți cunoștințe aprofundate despre Angular, luați în considerare înscrierea la ' din Edureka.

În acest articol, voi examina următoarele subiecte:

• Introducere în materiale unghiulare
• Instalare de material unghiular
• Componente materiale unghiulare
  • Navigare
    1. Bara de instrumente
    2. Meniul
  • Controale de formă
    1. Câmp formular
    2. Buton de radio
• CDK de material unghiular
  • Câmp text

Introducere în materiale unghiulare

Materiale au fost introduse ca limbaj de proiectare dezvoltat de Google în 2014. Proiectarea materialelor este un instrumentpentru cadrele front-end, ceea ce vă ajută vizual , mişcare , și interacţiune proiecta. De asemenea, vă ajută să vă adaptați la diferite dispozitive și diferite dimensiuni de ecran. În primul rând, a fost etichetat la AngularJS pentru a face aceste aplicații mai mult atractiv și să efectueze Mai repede . Apoi, Google a rescris complet codul de la zero și a eliminat JS i.e. , și a numit-o în septembrie 2016. Mai târziu, Google a etichetat Designul materialului cu Angular, care folosește , și a numit-o Materiale unghiulare.

Materiale unghiulare sau componentele User-Interface (UI) vă ajută să vă proiectați aplicația într-un structurat manieră. Ei atrag utilizatorii și îl fac mai ușor de accesat elementele sau componentele prezente în aplicația dvs. De asemenea, vă ajută să vă proiectați aplicațiile într-o manieră atractivă, cu caracter unic stiluri și forme . Aceste componente vă ajută la îmbunătățirea aplicației consistent , rapid , versatil și chiar design receptiv site-uri web.

Instalare de material unghiular

Acum, să începem cu un tutorial rapid despre cum să instalați Angular Materials. În primul rând, asigurați-vă că aveți instalat Angular în sistemul dvs. Dacă nu sunteți familiarizați cu Angular, consultați linkul de pe . Odată ce ați configurat totul, puteți adăuga materiale angulare la proiectul dvs. utilizând următoarea comandă:

de add @ unghiular / material

În primul rând, vă va cere să alegeți un nume de temă predefinit sau o temă personalizată.

Trebuie să alegeți tema pre-construită „Indigo / Pink”, care este tema implicită pentru a vă stiliza aplicația. De asemenea, puteți alege tema „Personalizată”, astfel încât să puteți personaliza fișierele temei care includ toate stilurile comune.

Apoi, vă va cere să configurați HammerJS . HammerJS este o bibliotecă populară, utilizată în principal în aplicația Angular. Se adaugă suport pentru gesturi tactile precum Glisare, Pan, Pinch, Rotate și multe altele, în special în aplicațiile mobile.

Puteți alege „Da” sau „Nu”. HammerJS poate fi util atunci când utilizați aplicația pe telefoane mobile. Deoarece telefoanele mobile oferă afișaje tactile, aceste gesturi sunt mai utile și pot arăta la modă în aplicația dvs. mobilă.

După ce vă alegeți alegerea, vi se va cere să vă configurați Animații pentru browser pentru material unghiular.

Trebuie să alegeți „Da”, astfel încât să puteți utiliza animații în aplicația dvs. Animațiile unghiulare vă fac aplicația mai distractivă și mai ușor de utilizat. Acest lucru vă poate îmbunătăți aplicația și experiența utilizatorului, ceea ce atrage atenția utilizatorilor.

Ulterior, aceasta va instala Angular Materials în aplicația dvs.

Componente materiale unghiulare

Așa cum am menționat mai devreme, componentele de material unghiular nu sunt decât UI / UX Componente de proiectare. Acestea conțin o gamă variată de componente, cum ar fi controale de formular, navigare, butoane și indicatori, ferestre pop-up și multe altele. Aceste componente vă ajută să implementați tipare în conformitate cu specificațiile de proiectare a materialelor.

Mergând mai departe, să vedem câteva exemple despre cum să implementați aceste componente în aplicația dvs. angulară.

Navigare

În primul rând, voi discuta despre componentele din Navigare.

• Bara de instrumente

Trebuie să tastați următorul cod în app.component.html pentru a utiliza componenta Barei de instrumente din aplicația dvs.

 Tutorial material unghiular 

este un container din material unghiular care este folosit pentru anteturi și titluri. Culoarea containerul poate fi schimbat folosind culoare proprietate.În mod implicit, barele de instrumente utilizează o culoare de fundal neutră bazată pe tema curentă, adică fie deschisă, fie întunecată.Puteți alege trei teme implicite care sunt: 'primar' , 'accent' , sau 'a avertiza' .Pentru a utiliza această bara de instrumente, trebuie mai întâi să o importați în app.module.ts fișier din materiale angulare utilizând următoarea comandă:

importați {MatToolbarModule} din „@ angular / material”

Mai târziu, trebuie să adăugați și acest modul în importuri: [] secțiune situată în app.module.ts fişier.

importuri: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],

Pentru Mat-Toolbar, trebuie să adăugați „ MatToolbarModule ”.

Acum, să vă difuzăm proiectul folosind următoarea comandă:

de servire -o

Acest lucru vă va deschide proiectul în browserul implicit al sistemului dvs., după cum se arată mai jos:

Dacă doriți să schimbați culoarea barei de instrumente conform alegerii dvs., o puteți face cu ajutorul foii de stil CSS. Permiteți-mi să vă arăt un exemplu.

Mai întâi, trebuie să ștergeți culoare proprietate din container și apoi, tastați următoarele CSS cod în app.component.css fişier.

mat-toolbar {background-color: / * color-of-your-choice * / color: / * text-color * /}

Acum, servește-ți proiectul pentru a vedea rezultatul.

• Meniul

În continuare, voi discuta despre Componenta Meniu. Trebuie să tastați următorul cod în app.component.html fişier.

 Tutorial material unghiular Setări meniu Ajutor

Să adăugăm câteva stiluri pe Meniul buton. Trebuie să tastați următorul cod în app.component.css fişier.

.space {flex: 1 1 auto} .btns {width: 100px height: 40px font-size: large border-radius: 10px border: 3px solid # 113c89 background-color: lightcoral}

class = ”spațiu” este folosit pentru a adăuga spațiu între „Nume bara de instrumente” și „Opțiune meniu”.

În cazul în care nu sunteți familiarizat cu foaia de stil CSS, puteți consulta blogul nostru de pe pentru a intra în profunzime.

La fel ca Bara de instrumente Google, de utilizat și containere, trebuie să urmați aceeași procedură ca mai sus, pentru a importa MatMenuModule și MatButtonModule din material unghiular și adăugați-le în importuri: [] secțiune situată în app.module.ts fişier.

Serviți-vă proiectul acum pentru a afișa rezultatul.

Controale de formă

Acum, voi discuta despre componentele din Controlul formularelor.

• Câmp formular

După cum sugerează și numele, Form-Field este utilizat pentru intrările date de utilizator. Este cel mai frecvent utilizat pentru înregistrarea unui utilizator, într-o aplicație sau pe un site web.

Trebuie să tastați următorul cod în app.component.html pentru a utiliza componenta Form-Field din aplicația dvs.

 
Controale de formă
Nume

Ca de obicei, trebuie să importați MatFormFieldModule și MatInputModule și adăugați-le în importuri: [] secțiune situată în app.module.ts fişier. Codul de mai sus este utilizat în general pentru a introduce nume precum „Prenume”, „Nume”, etc. Puteți folosi chiar validatori și puteți face obligatoriu un câmp. De exemplu, îl puteți folosi pentru câmpul E-mail. Puteți ascunde sau afișa textul pentru parole. Pentru referință, consultați codul de mai jos:

Introduceți adresa de e-mail {{getErrorMessage ()}} Introduceți parola {{ascunde? 'visible_off': 'vizibilitate'}}

În dumneavoastră app.component.css fișier, trebuie să adăugați următorul cod:

.example-container {padding-left: 50px}

Acum, în app.component.ts fișier, trebuie să importați FormControl și Validatori din @ unghiular / forme director.

importați {FormControl, Validators} din „@ angular / forms”

Trebuie să adăugați chiar textul pentru a afișa o eroare în următoarea clasă.

clasa de export AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('obligatoriu')? „Trebuie să introduceți o valoare”: this.email.hasError („e-mail”)? 'Nu este un e-mail valid': ''} ascunde = adevărat}

Referindu-vă la procedura de mai sus, trebuie să tastați următorul cod în app.module.ts fișier pentru a importa modulele necesare.

importați {FormsModule, ReactiveFormsModule} din „@ angular / forms” importați {MatIconModule} din „@ angular / material”

Mai târziu, trebuie să adăugați aceste module în importuri: [] secțiune.

• Buton de radio

Butoanele radio sunt utilizate în general pentru alegerea unei opțiuni dintre diferitele opțiuni. Puteți consulta următorul cod pentru referință.

Pentru app.component.html fişier,

 
Gen
Masculin Feminin

Pentru app.component.css fişier,

buton radio mat {Padding-left: 50px}

Acum, trebuie să importați MatRadioModule și adăugați-l în importuri: [] secțiune situată în app.module.ts fişier.

Mai târziu, trebuie să vă difuzați proiectul pentru a afișa rezultatul.

Mergând mai departe, voi discuta despre Angular Material CDK.

CDK de material unghiular

CDK, cunoscut și sub numele de Kit de dezvoltare componentă , este o bibliotecă de comportamente predefinite în Material unghiular, care este un set de instrumente care implementează comun tipare de interacțiune și caracteristicile aplicației . Nu are niciun stil specific proiectării materialelor. Să vedem un exemplu de CDK.

• Câmp text

Componenta câmp text oferă utilități pentru lucrul cu câmpurile de introducere a textului. Puteți utiliza componentele CDK din câmpul text pentru a redimensiona intrările. Să vedem un exemplu despre cum să-l implementăm.

Pentru app.component.html fişier,

 
CDK de material unghiular
Dimensiunea fontului 10px 12px 14px 16px 18px 20px Autosize textarea

Pentru app.component.ts fișier, trebuie mai întâi să importați componentele necesare.

importați {CdkTextareaAutosize} din „@ angular / cdk / text-field” importați {NgZone, ViewChild} din „@ angular / core” import {take} din „rxjs / operators”

Acum, trebuie să tastați următorul cod în interiorul clasei.

cum se obține lungimea javascriptului matricei

clasa de export AppComponent {constructor (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}

Apoi, trebuie să importați MatSelectModule și adăugați-l în importuri: [] secțiune situată în app.module.ts fişier.

În cele din urmă, trebuie să vă serviți proiectul pentru a afișa rezultatul.

Aceasta nu este concluzia și există alte câteva componente în materialele unghiulare. Puteți face referire la acestea din site oficial de material unghiular.

Cu aceasta, aș vrea să-mi închei blogul. Sper că sunteți clar cu privire la fundamentele Materialului unghiular.Dacă aveți nelămuriri sau întrebări cu privire la acest articol, nu ezitați să le postați în secțiunea de comentarii de mai jos.

Dacă doriți să aflați tot ce tocmai ați învățat din acest blog și mai multe despre Unghiular , și orientați-vă cariera către un dezvoltator angular competent, apoi luați în considerare înscrierea la programul nostru ' .

Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii a acestui blog „Material unghiular” și vă vom contacta cât mai curând posibil.