UI / UX komponente u Angulu poznate su kao Kutni materijali. Onipomoć u izvedbi kutnih aplikacija efikasno . Međutim, ako ih još niste upoznati, evo članka koji će vam pomoći da detaljno naučite Kutne materijale. Također, to steknite detaljno znanje Angulala, razmislite o upisu u ' iz Edureke.
U ovom članku proučit ću sljedeće teme:
Uvod u kutne materijale
Materijali su predstavljeni kao jezik dizajna koji je Google razvio 2014. godine. Dizajn materijala je alatza front-end okvire, što vam pomaže u vizualni , pokret , i interakcija oblikovati. Također vam pomaže prilagoditi se na različitim uređajima i različitim veličinama zaslona. Prvo je označen sa AngularJS kako bi ove aplikacije bile više atraktivan i izvesti brže . Zatim je Google u potpunosti prepisao kôd ispočetka i uklonio JS tj. , i imenovao ga u rujnu 2016. Kasnije je Google označio Material Design na Angular, koji koristi , i nazvao ga Kutni materijali.
Kutni materijali ili komponente korisničkog sučelja (UI) pomažu vam u dizajniranju aplikacije u a strukturirano način. Oni privlače korisnike i čine ga lakši pristup elementi ili komponente prisutni u vašoj aplikaciji. Oni također pomažu u dizajniranju vaših aplikacija na atraktivan, jedinstven način stilova i oblika . Te komponente pomažu u poboljšanju vaše aplikacije dosljedan , brzo , svestran pa čak i dizajn uzvratni web stranice.
Ugradnja kutnog materijala
Sada krenimo s kratkim vodičem o tome kako instalirati kutne materijale. Prvo, provjerite je li u vašem sustavu instaliran Angular. Ako vam Angular nije poznat, pogledajte vezu na . Nakon što sve postavite, možete dodati Angular Materials u svoj projekt pomoću sljedeće naredbe:
od add @ kutni / materijal
Prvo će se od vas tražiti da odaberete unaprijed izgrađeno ime teme ili prilagođenu temu.
Morate odabrati unaprijed izgrađenu temu 'Indigo / Pink' koja je zadana tema za oblikovanje vaše aplikacije. Također možete odabrati temu „Prilagođeno“ tako da možete prilagoditi datoteke tema koje uključuju sve uobičajene stilove.
Dalje će tražiti da postavite ČekićJS . HammerJS je popularna knjižnica koja se uglavnom koristi u aplikaciji Angular. Dodaje podršku za geste dodira poput prevlačenja, pomicanja, umetanja, zakretanja i mnogih drugih, posebno u mobilnim aplikacijama.
Možete odabrati 'Da' ili 'Ne'. HammerJS može biti koristan kada svoju aplikaciju koristite na mobilnim telefonima. Kako mobiteli nude zaslone osjetljive na dodir, ove su geste korisnije i mogu izgledati moderno u vašoj mobilnoj aplikaciji.
Nakon što odaberete svoj odabir, od vas će se tražiti da ga postavite Animacije preglednika za kutni materijal.
Morate odabrati 'Da' kako biste mogli koristiti animacije u svojoj aplikaciji. Kutne animacije čine vašu aplikaciju zabavnijom i jednostavnijom za upotrebu. To može poboljšati vašu aplikaciju i korisničko iskustvo što privlači pažnju korisnika.
Nakon toga, ovo će instalirati Kutne materijale u vašu aplikaciju.
Komponente kutnog materijala
Kao što je ranije spomenuto, Kutne komponente materijala nisu ništa drugo do UI / UX Komponente dizajna. Sadrže raznolik raspon komponenata poput kontrola obrasca, navigacije, gumba i indikatora, skočnih prozora i mnogih drugih. Ove komponente pomažu vam u primjeni uzoraka prema specifikaciji dizajna materijala.
Krenimo dalje, pogledajmo nekoliko primjera kako implementirati ove komponente u svoju kutnu aplikaciju.
Navigacija
Prvo ću razgovarati o komponentama u Navigaciji.
- Alatna traka
Morate upisati sljedeći kod u app.component.html datoteku za upotrebu komponente Alatne trake u vašoj aplikaciji.
Vodič za kutni materijal je spremnik od kutnog materijala koji se koristi za zaglavlja i naslove. Boja spremnik se može promijeniti pomoću boja imovine.Prema zadanim postavkama, alatne trake koriste neutralnu boju pozadine na temelju trenutne teme, tj. Svijetlu ili tamnu.Možete odabrati tri zadane teme koje su: 'Primarno' , 'naglasak' , ili 'upozoriti' .Da biste koristili ovu alatnu traku, prvo je morate uvesti u app.module.ts datoteka iz kutnih materijala pomoću sljedeće naredbe:
uvezi {MatToolbarModule} iz '@ angular / material'Kasnije ćete također morati dodati ovaj modul u uvoz: [] odjeljak smješten u app.module.ts datoteka.
uvozi: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
Za Mat-Toolbar morate dodati “ MatToolbarModule '.
Sada, poslužimo vaš projekt pomoću sljedeće naredbe:
od služiti -o
Ovo će otvoriti vaš projekt u zadanom pregledniku vašeg sustava kao što je prikazano dolje:
Ako želite promijeniti boju alatne trake prema vašem izboru, to možete učiniti pomoću CSS tablice stilova. Dopustite mi da vam pokažem primjer.
Prvo, trebate izbrisati boja vlasništvo iz spremnik, a zatim unesite sljedeće CSS kod u app.component.css datoteka.
mat-alatna traka {background-color: / * boja-po vašem izboru * / color: / * text-color * /}Sada poslužite svoj projekt da biste vidjeli rezultat.
- izbornik
Dalje ću razgovarati o komponenti izbornika. Morate upisati sljedeći kod u svoj app.component.html datoteka.
Vodič za kutni materijal Postavke izbornika PomoćDodajmo malo stylinga na izbornik dugme. Morate upisati sljedeći kod u svoj app.component.css datoteka.
.prostor {flex: 1 1 auto} .btns {širina: 100px visina: 40px veličina fonta: velika granica-radijus: 10px granica: 3px puna # 113c89 pozadina-boja: lightcoral}class = 'razmak' koristi se za dodavanje razmaka između 'Naziv alatne trake' i 'Opcija izbornika'.
U slučaju da niste upoznati s CSS tablicom stilova, možete se obratiti našem blogu na da biste dobili dubinu.
Kao i Alatna traka, za upotrebu i kontejnere, za uvoz morate slijediti isti postupak kao gore MatMenuModule i MatButtonModule iz kutni materijal i dodajte ih u uvoz: [] odjeljak smješten u app.module.ts datoteka.
Poslužite svoj projekt sada za prikaz rezultata.
Kontrole obrasca
Sada ću razgovarati o komponentama u Kontroli obrasca.
- Polje obrasca
Kao što i samo ime govori, Polje obrasca koristi se za unose koje daje korisnik. Najčešće se koristi za registraciju korisnika, u aplikaciji ili na web mjestu.
Morate upisati sljedeći kod u app.component.html datoteku za upotrebu komponente Form-Field u vašoj aplikaciji.
Kontrole obrasca
Ime
Kao i obično, trebate uvesti MatFormFieldModule i MatInputModule i dodajte ih u uvoz: [] odjeljak smješten u app.module.ts datoteka. Gornji kôd obično se koristi za unos imena kao što su 'Ime', 'Prezime' itd. Možete čak koristiti Validatore i polje učiniti obveznim. Na primjer, možete ga koristiti za polje E-pošta. Tekst za lozinke možete sakriti ili otkriti. Za referencu pogledajte donji kod:
Unesite svoju e-adresu {{getErrorMessage ()}} Unesite lozinku {{sakriti? 'visibility_off': 'vidljivost'}}U vašem app.component.css datoteku, morate dodati sljedeći kod:
.example-container {padding-left: 50px}Sada, u vašem app.component.ts datoteku, trebate je uvesti FormControl i Provjerivači iz @ kutni / oblici imenik.
uvezi {FormControl, Validators} iz '@ angular / forms'Trebate čak dodati tekst da biste prikazali pogrešku unutar sljedeće klase.
klasa izvoza AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('required')? 'Morate unijeti vrijednost': this.email.hasError ('email')? 'Nije valjana e-adresa': ''} sakrij = istinito}Pozivajući se na gornji postupak, morate unijeti sljedeći kôd u svoj app.module.ts datoteku za uvoz potrebnih modula.
uvoz {FormsModule, ReactiveFormsModule} iz '@ angular / forms' uvoz {MatIconModule} iz '@ angular / material'Kasnije morate ove module dodati u uvoz: [] odjeljak.
- Radio gumb
Radio tipke se obično koriste za odabir izbora između različitih opcija. Možete pogledati sljedeći kod za referencu.
Za app.component.html datoteka,
Spol
Muško Žensko
Za app.component.css datoteka,
mat-radio-gumb {Padding-left: 50px}Sada morate uvesti MatRadioModule i dodajte ga u uvoz: [] odjeljak smješten u app.module.ts datoteka.
Kasnije trebate poslužiti svom projektu za prikaz rezultata.
Krećući se dalje, razgovarat ću o CDK-u o kutnom materijalu.
Kutni materijal CDK
CDK, također poznat kao Komponentni razvojni komplet , je knjižnica unaprijed definirana ponašanja u kutnom materijalu, što je skup alata koji implementiraju zajedničko obrasci interakcije i značajke aplikacije . Nema nikakav stil specifičan za dizajn materijala. Pogledajmo primjer CDK-a.
- Polje za tekst
Komponenta Tekstualno polje pruža uslužne programe za rad s poljima za unos teksta. CDK komponente na polju za tekst možete koristiti za promjenu veličine ulaza. Pogledajmo primjer kako to provesti.
Za app.component.html datoteka,
Kutni materijal CDK
Veličina fonta 10px 12px 14px 16px 18px 20px Automatska veličina tekstualnog područja
Za app.component.ts datoteku, prvo morate uvesti potrebne komponente.
uvoz {CdkTextareaAutosize} iz '@ angular / cdk / text-field' import {NgZone, ViewChild} iz '@ angular / core' import {take} iz 'rxjs / operatora'Sada trebate upisati sljedeći kod unutar klase.
kako inicijalizirati objekt u pythonu
izvoz klase AppComponent {konstruktor (privatni _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}Dalje, trebate uvesti MatSelectModule i dodajte ga u uvoz: [] odjeljak smješten u app.module.ts datoteka.
Na kraju, trebate poslužiti svom projektu za prikaz rezultata.
To nije zaključak, a u kutnim materijalima postoji nekoliko drugih komponenata. Možete ih uputiti iz službena stranica kutnog materijala.
Ovim bih želio završiti svoj blog. Nadam se da su vam jasne osnove kutnog materijala.Ako imate bilo kakvih sumnji ili pitanja u vezi s ovim člankom, ne ustručavajte se objaviti ih u odjeljku za komentare u nastavku.
Ako želite naučiti sve ono što ste upravo naučili s ovog bloga, i više o tome Kutni i usmjerite svoju karijeru prema vrsnom kutnom programeru, a zatim razmislite o upisu za našeg ' .
Imate pitanje za nas? Molimo vas da ga spominjete u odjeljku za komentare ovog bloga 'Kutni materijal', a mi ćemo vam se javiti što je prije moguće.