UI / UX komponente v programu Angular so znane kot Kotni materiali. Onipomoč pri izvedbi programa Angular učinkovito . Če pa jih še ne poznate, je tukaj članek, ki vam bo v pomoč pri podrobnem učenju kotnih materialov. Tudi to pridobite poglobljeno znanje programa Angular, razmislite o vpisu ' iz Edureke.
V tem članku bom preučil naslednje teme:
Uvod v kotne materiale
Materiali so bili predstavljeni kot oblikovalski jezik, ki ga je Google razvil leta 2014. Materialno oblikovanje je orodjeza front-end ogrodja, kar vam pomaga pri vizualno , gibanje , in interakcija oblikovanje. Pomaga tudi pri prilagajanju na različne naprave in različne velikosti zaslona. Najprej je bil označen na AngularJS, da bi te aplikacije naredil več privlačna in izvajati hitreje . Nato je Google popolnoma prepisal kodo iz nič in odstranil JS tj. , in ga poimenoval septembra 2016. Kasneje je Google Material Design označil kot Angular, ki uporablja , in ga poimenovali Kotni materiali.
Kotni materiali ali komponente uporabniškega vmesnika (UI) vam pomagajo oblikovati aplikacijo v a strukturirano način. Pritegnejo uporabnike in jim uspejo lažji dostop elementi ali komponente, ki so prisotni v vaši prijavi. Pomagajo tudi pri oblikovanju vaših aplikacij na privlačen in edinstven način stilov in oblike . Te komponente pomagajo povečati vašo aplikacijo dosledno , hitro , vsestranski in celo oblikovanje odziven spletna mesta.
Namestitev kotnega materiala
Zdaj pa začnimo s kratko vadnico o namestitvi kotnih materialov. Najprej najprej preverite, ali je v vašem sistemu nameščen Angular. Če programa Angular ne poznate, glejte povezavo na strani . Ko ste vse nastavili, lahko v svoj projekt dodate kotne materiale z naslednjim ukazom:
od add @ angular / material
Najprej vas bo pozval, da izberete vnaprej izdelano ime teme ali temo po meri.
Izbrati morate vnaprej izdelano temo 'Indigo / Pink', ki je privzeta tema za oblikovanje vaše aplikacije. Izberete lahko tudi temo »Po meri«, tako da lahko prilagodite datoteke s temami, ki vključujejo vse pogoste sloge.
Nato vas bo pozval, da nastavite KladivoJS . HammerJS je priljubljena knjižnica, ki se večinoma uporablja v kotni aplikaciji. Dodaja podporo za poteze na dotik, kot so Swipe, Pan, Pinch, Rotate in še veliko več, zlasti v mobilnih aplikacijah.
Izberete lahko 'Da' ali 'Ne'. HammerJS je lahko koristen, kadar aplikacijo uporabljate na mobilnih telefonih. Ker mobilni telefoni ponujajo zaslone na dotik, so te poteze bolj uporabne in so v vaši mobilni aplikaciji morda videti trendovsko.
Ko izberete svojo izbiro, vas bo nato pozval, da nastavite Animacije brskalnika za kotni material.
Izbrati morate »Da«, da boste lahko v svoji aplikaciji uporabljali animacije. Kotne animacije naredijo vašo aplikacijo bolj zabavno in enostavnejšo za uporabo. To lahko izboljša vašo aplikacijo in uporabniško izkušnjo, ki pritegne pozornost uporabnikov.
Nato bodo v vašo aplikacijo nameščeni kotni materiali.
Komponente kotnih materialov
Kot smo že omenili, komponente kotnega materiala niso nič drugega kot UI / UX Komponente oblikovanja. Vsebujejo različne sklope komponent, kot so kontrolniki obrazcev, navigacija, gumbi in indikatorji, pojavna okna in še veliko več. Te komponente vam pomagajo izvajati vzorce v skladu s specifikacijo Material Design.
V nadaljevanju si oglejmo nekaj primerov, kako te komponente uporabiti v svoji kotni aplikaciji.
Navigacija
Najprej bom razpravljal o komponentah v Navigaciji.
- Orodna vrstica
V datoteko. Morate vnesti naslednjo kodo app.component.html datoteko za uporabo komponente Orodna vrstica v vaši aplikaciji.
Vadnica za kotni material je posoda iz kotnega materiala, ki se uporablja za glave in naslove. Barva vsebnik lahko spremenite s pomočjo barva lastnine.Orodne vrstice privzeto uporabljajo nevtralno barvo ozadja glede na trenutno temo, tj. Svetlo ali temno.Izberete lahko tri privzete teme: 'Primarno' , 'naglas' , ali 'Opozori' .Če želite uporabiti to orodno vrstico, jo morate najprej uvoziti v app.module.ts datoteko iz kotnih materialov z naslednjim ukazom:
uvozi {MatToolbarModule} iz '@ angular / material'Pozneje morate ta modul dodati tudi v uvoz: [] odsek, ki se nahaja v app.module.ts mapa.
uvozi: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
Za Mat-Toolbar morate dodati “ MatToolbarModule '.
Zdaj pa postrežemo vaš projekt z naslednjim ukazom:
služiti -o
To bo odprlo vaš projekt v privzetem brskalniku vašega sistema, kot je prikazano spodaj:
Če želite spremeniti barvo orodne vrstice po svoji izbiri, lahko to storite s pomočjo slogovnega lista CSS. Naj vam pokažem primer.
Najprej morate izbrisati barva lastnina od posodo in nato vnesite naslednje CSS koda v app.component.css mapa.
mat-orodna vrstica {color-background: / * barva po vaši izbiri * / color: / * text-color * /}Zdaj pa služite svojemu projektu, da vidite rezultat.
- Meni
Nato bom razpravljal o komponenti menija. V svojo kodo morate vnesti naslednjo kodo app.component.html mapa.
Vadnica za kotni material Meni Nastavitve PomočDodajmo nekaj stylinga na Meni . V svojo kodo morate vnesti naslednjo kodo app.component.css mapa.
.space {flex: 1 1 auto} .btns {širina: 100px višina: 40px velikost pisave: velika obroba-polmer: 10px meja: 3px polno # 113c89 barva ozadja: lightcoral}class = 'space' se uporablja za dodajanje presledka med “Ime orodne vrstice” in “Možnost menija”.
Če niste seznanjeni s tabelo slogov CSS, se lahko obrnete na naš spletni dnevnik za poglobitev.
Tako kot Orodna vrstica za uporabo in posode, morate za uvoz slediti enakemu postopku kot zgoraj MatMenuModule in MatButtonModule iz kotni material in jih dodajte v uvoz: [] oddelek, ki se nahaja v app.module.ts mapa.
Pokažite svoj projekt zdaj za prikaz rezultatov.
Kontrole obrazca
Zdaj bom razpravljal o komponentah v nadzoru obrazcev.
- Polje obrazca
Kot že ime pove, se polje za obrazce uporablja za vnose, ki jih da uporabnik. Najpogosteje se uporablja za registracijo uporabnika, v aplikaciji ali na spletnem mestu.
V datoteko. Morate vnesti naslednjo kodo app.component.html datoteko za uporabo komponente Form-Field v vaši aplikaciji.
Kontrole obrazca
Ime
Kot običajno morate uvoziti MatFormFieldModule in MatInputModule in jih dodajte v uvoz: [] odsek, ki se nahaja v app.module.ts mapa. Zgornja koda se običajno uporablja za vnos imen, kot so 'Ime', 'Priimek' itd. Lahko celo uporabite validatorje in določite obvezno polje. Uporabite ga lahko na primer za polje E-pošta. Besedilo za gesla lahko skrijete ali razkrijete. Za referenco si oglejte spodnjo kodo:
Vnesite svoj e-poštni naslov {{getErrorMessage ()}} Vnesite geslo {{skriti? 'visibility_off': 'vidnost'}}V vašem app.component.css datoteko, morate dodati naslednjo kodo:
.example-container {padding-left: 50px}Zdaj, v vašem app.component.ts datoteko, morate uvoziti FormControl in Validatorji iz @ kotni / obrazci imenik.
uvozi {FormControl, Validators} iz '@ angular / forms'Če želite prikazati napako v naslednjem razredu, morate celo dodati besedilo.
izvozni razred AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('required')? 'Vnesti morate vrednost': this.email.hasError ('email')? 'Ni veljaven e-poštni naslov': ''} skrij = res}Glede na zgornji postopek morate v svojo datoteko vnesti naslednjo kodo app.module.ts datoteko za uvoz potrebnih modulov.
uvoz {FormsModule, ReactiveFormsModule} iz '@ angular / forms' uvoz {MatIconModule} iz '@ angular / material'Pozneje morate te module dodati v uvoz: [] oddelku.
- Radijski gumb
Radijski gumbi se običajno uporabljajo za izbiro med različnimi možnostmi. Za referenco si lahko ogledate naslednjo kodo.
Za app.component.html mapa,
Spol
Moški ženski
Za app.component.css mapa,
mat-radijski gumb {Padding-left: 50px}Zdaj morate uvoziti MatRadioModule in ga dodajte uvoz: [] odsek, ki se nahaja v app.module.ts mapa.
Kasneje morate svojemu projektu služiti za prikaz rezultatov.
V nadaljevanju bom razpravljal o CDK o kotnih materialih.
Kotni material CDK
CDK, znan tudi kot Komponentni razvojni komplet , je knjižnica vnaprej določeno vedenje v Angular Material, ki je nabor orodij za izvajanje skupnih vzorci interakcije in funkcije aplikacije . Nima nobenega stila, značilnega za Material Design. Poglejmo primer CDK.
- Besedilno polje
Komponenta besedilnega polja nudi pripomočke za delo s polji za vnos besedila. S komponentami CDK v besedilnem polju lahko spremenite velikost vnosov. Poglejmo primer, kako ga izvajati.
Za app.component.html mapa,
Kotni material CDK
Velikost pisave 10px 12px 14px 16px 18px 20px Samodejna velikost besedila
Za app.component.ts datoteko, morate najprej uvoziti potrebne komponente.
uvoz {CdkTextareaAutosize} iz '@ angular / cdk / text-field' import {NgZone, ViewChild} iz '@ angular / core' import {take} iz 'rxjs / operaterji'Zdaj morate v razred vnesti naslednjo kodo.
kaj je rmi v javi
izvozni razred AppComponent {konstruktor (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}Nato morate uvoziti MatSelectModule in ga dodajte uvoz: [] odsek, ki se nahaja v app.module.ts mapa.
Končno morate svojemu projektu služiti za prikaz rezultatov.
To ni zaključek in v kotnih materialih obstaja več drugih komponent. Nanje se lahko sklicujete iz uradna spletna stran kotnega materiala.
S tem bi rad zaključil svoj blog. Upam, da so vam jasne osnove kotnega materiala.Če imate kakršne koli dvome ali vprašanja v zvezi s tem člankom, jih brez odlašanja objavite v spodnjem oddelku za komentarje.
Če bi radi izvedeli vse, kar ste se pravkar naučili iz tega spletnega dnevnika, in še več o tem Kotna in svojo kariero usmerite k usposobljenemu kotnemu razvijalcu, nato razmislite o včlanitvi za našega ' .
Imate vprašanje za nas? Prosimo, omenite ga v oddelku za komentarje tega spletnega dnevnika 'Kotni material', mi se vam bomo javili v najkrajšem možnem času.