UI / UX komponenty v Angular sú známe ako Uhlové materiály. Onipomáhajú vykonávať hranaté aplikácie efektívne . Ak ich však ešte nepoznáte, tu je článok, ktorý vám pomôže podrobne sa naučiť Uhlové materiály. Tiež to získať dôkladné znalosti uhla, zvážte registráciu ' z Edureky.
V tomto článku sa budem venovať nasledujúcim témam:
- Úvod do uhlových materiálov
- Inštalácia uhlového materiálu
- Súčasti uhlového materiálu
- Uhlový materiál CDK
Úvod do uhlových materiálov
Materiály boli predstavené ako dizajnový jazyk, ktorý vyvinula spoločnosť Google v roku 2014. Materiálové prevedenie je nástrojpre front-endové rámce, ktoré vám pomôžu vizuálne , pohyb a interakcia dizajn. Pomáha vám tiež prispôsobiť sa naprieč rôznymi zariadeniami a rôznymi veľkosťami obrazovky. Najskôr bol označený v AngularJS, aby boli tieto aplikácie viac atraktívny a vystupovať rýchlejšie . Potom Google úplne prepísal kód od začiatku a odstránil JS, t.j. a pomenovali ho v septembri 2016. Neskôr Google označil Material Design za Angular, ktorý používa a pomenovali ju Uhlové materiály.
Uhlové materiály alebo komponenty používateľského rozhrania (UI) vám pomôžu navrhnúť aplikáciu v a štruktúrovaný spôsobom. Lákajú používateľov a robia to ľahšie prístupný prvky alebo komponenty prítomné vo vašej aplikácii. Pomáhajú tiež pri atraktívnom a jedinečnom navrhovaní vašich aplikácií štýly a tvary . Tieto komponenty pomáhajú vylepšiť vašu aplikáciu dôsledný , rýchlo , všestranný a dokonca aj dizajn responzívny webové stránky.
Inštalácia uhlového materiálu
Teraz začnime rýchlym návodom, ako inštalovať Angular Materials. Najdôležitejšie je skontrolovať, či máte vo svojom systéme nainštalovaný Angular. Ak Angular nepoznáte, prečítajte si odkaz na . Keď máte všetko nastavené, môžete do projektu pridať uhlové materiály pomocou nasledujúceho príkazu:
of add @ angular / material
Najskôr vás požiada o výber vopred zostaveného názvu témy alebo vlastnej témy.
Musíte zvoliť vopred pripravenú tému „Indigo / Pink“, ktorá je predvoleným motívom na prispôsobenie vašej aplikácie. Môžete si tiež zvoliť tému „Prispôsobené“, aby ste mohli prispôsobiť súbory tém, ktoré obsahujú všetky bežné štýly.
Ďalej vás požiada o nastavenie HammerJS . HammerJS je populárna knižnica, ktorá sa hlavne používa v aplikácii Angular. Pridáva podporu pre dotykové gestá, ako je prejdenie prstom, posunutie, stlačenie, otočenie a mnoho ďalších, najmä v mobilných aplikáciách.
Môžete zvoliť „Áno“ alebo „Nie“. HammerJS môže byť užitočný, keď svoju aplikáciu používate na mobilných telefónoch. Pretože mobilné telefóny ponúkajú dotykové displeje, tieto gestá sú užitočnejšie a vo vašej mobilnej aplikácii môžu vyzerať trendy.
Po výbere si budete vyzvaní na nastavenie Animácie prehliadača pre uhlový materiál.
Musíte zvoliť „Áno“, aby ste mohli vo svojej aplikácii používať animácie. Vďaka uhlovým animáciám je vaša aplikácia zábavnejšia a ľahšie sa používa. To môže zlepšiť vašu aplikáciu a dojem používateľa, ktorý priťahuje pozornosť používateľov.
Následne to do vašej aplikácie nainštaluje Angular Materials.
Súčasti uhlového materiálu
Ako už bolo spomenuté, komponenty Angular Material Components nie sú nič iné ako UI / UX Dizajnové komponenty. Obsahujú celý rad komponentov, ako sú ovládacie prvky formulárov, navigácia, tlačidlá a indikátory, kontextové okná a mnoho ďalších. Tieto komponenty vám pomôžu implementovať vzory podľa špecifikácie materiálového dizajnu.
Ďalej si ukážeme niekoľko príkladov implementácie týchto komponentov do vašej uhlovej aplikácie.
Navigácia
Najskôr rozoberiem komponenty v Navigácii.
- Panel nástrojov
Musíte zadať nasledujúci kód do app.component.html súbor na použitie komponentu Panel s nástrojmi vo vašej aplikácii.
Výukový program pre uhlové materiály je nádoba z materiálu Angular, ktorá sa používa na hlavičky a tituly. Farba kontajner je možné meniť pomocou farba nehnuteľnosť.Panely nástrojov predvolene používajú neutrálnu farbu pozadia založenú na aktuálnej téme, t. J. Svetlú alebo tmavú.Môžete zvoliť tri predvolené témy, ktoré sú: 'primárny' , „Prízvuk“ alebo „Varovať“ .Ak chcete použiť tento panel s nástrojmi, musíte ho najskôr importovať do app.module.ts súbor z uhlových materiálov pomocou nasledujúceho príkazu:
importovať {MatToolbarModule} z '@ angular / material'Neskôr musíte tento modul pridať aj do priečinka dovoz: [] časť umiestnená v app.module.ts spis.
importy: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
Pre Mat-Toolbar musíte pridať „ MatToolbarModule “.
Teraz poslúžime vášmu projektu pomocou nasledujúceho príkazu:
slúžiť -o
Týmto sa váš projekt otvorí v predvolenom prehliadači vášho systému, ako je uvedené nižšie:
Ak chcete zmeniť farbu panela s nástrojmi podľa vlastného výberu, môžete to urobiť pomocou šablóny štýlov CSS. Ukážem vám príklad.
Najprv musíte vymazať farba majetok z kontajner a potom zadajte nasledujúci text CSS kód v app.component.css spis.
panel nástrojov mat {farba pozadia: / * farba podľa vášho výberu * / farba: / * farba textu * /}Teraz slúžte svojmu projektu, aby ste videli výsledok.
- Ponuka
Ďalej budem diskutovať o komponente ponuky. Musíte zadať nasledujúci kód do svojho app.component.html spis.
Výukový program pre uhlové materiály Pomocník v ponuke NastaveniaPoďme pridať nejaký styling na Ponuka tlačidlo. Musíte zadať nasledujúci kód do svojho app.component.css spis.
.priestor {flex: 1 1 auto} .btns {šírka: 100px výška: 40px veľkosť písma: veľký polomer okraja: 10px okraj: 3px pevný # 113c89 farba pozadia: lightcoral}trieda = ”medzera” sa používa na pridanie medzier medzi „Názov panela s nástrojmi“ a „Možnosti ponuky“.
Ak nie ste oboznámení so šablónou štýlov CSS, môžete si pozrieť náš blog na dostať sa do hĺbky.
Rovnako ako v prípade Panela s nástrojmi aj použitie a kontajnerov, pri importovaní musíte postupovať rovnako ako vyššie MatMenuModule a MatButtonModule od hranatý materiál a pridajte ich dovoz: [] časť nachádzajúca sa v app.module.ts spis.
Podajte svoj projekt teraz na zobrazenie výstupu.
Ovládacie prvky formulára
Teraz budem diskutovať o komponentoch vo Form Control.
- Pole formulára
Ako už názov napovedá, pole Form-Field sa používa na vstupy zadané používateľom. Najčastejšie sa používa na registráciu používateľa v aplikácii alebo na webovej stránke.
Musíte zadať nasledujúci kód do app.component.html súbor, aby ste vo svojej aplikácii mohli použiť komponent Form-Field.
Ovládacie prvky formulára
názov
Ako obvykle je potrebné importovať MatFormFieldModule a MatInputModule a pridajte ich dovoz: [] časť umiestnená v app.module.ts spis. Vyššie uvedený kód sa zvyčajne používa na zadanie mien ako „Meno“, „Priezvisko“ atď. Môžete dokonca použiť Validátory a označiť pole ako povinné. Môžete ho napríklad použiť pre pole E-mail. Text pre heslá môžete skryť alebo skryť. Ako referenciu si pozrite nasledujúci kód:
Zadajte svoj e-mail {{getErrorMessage ()}} Zadajte svoje heslo {{skryť? 'visibility_off': 'visibility'}}Vo vašom app.component.css súboru, musíte pridať nasledujúci kód:
.example-container {padding-left: 50px}Teraz vo vašom app.component.ts súbor, musíte importovať FormControl a Validátory od @ uhlové / formy adresár.
importovať {FormControl, Validators} z '@ angular / forms'Musíte dokonca pridať text, aby sa zobrazila chyba v nasledujúcej triede.
trieda exportu AppComponent {email = nový FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('required')? „Musíte zadať hodnotu“: this.email.hasError („email“)? 'Not a valid email': ''} hide = true}Podľa vyššie uvedeného postupu musíte do svojej adresy napísať nasledujúci kód app.module.ts súbor na import potrebných modulov.
importovať {FormsModule, ReactiveFormsModule} z '@ angular / forms' import {MatIconModule} z '@ angular / material'Neskôr budete musieť tieto moduly pridať do dovoz: [] oddiel.
- Tlačítko na Rádiu
Rozhlasové tlačidlá sa zvyčajne používajú na výber medzi rôznymi možnosťami. Môžete si pozrieť nasledujúci kód ako referenciu.
Pre app.component.html pilník,
rod
Muž žena
Pre app.component.css pilník,
prepínač rohože {Padding-left: 50px}Teraz musíte importovať MatRadioModule a pridať dovoz: [] časť umiestnená v app.module.ts spis.
Neskôr budete musieť svojmu projektu slúžiť na zobrazenie výstupu.
Vpred budem diskutovať o Angular Material CDK.
Uhlový materiál CDK
CDK, tiež známy ako Súprava pre vývoj komponentov , je knižnica preddefinované správanie v Angular Material, čo je sada nástrojov, ktoré implementujú bežné interakčné vzory a funkcie aplikácie . Nemá žiadny štýl špecifický pre Material Design. Pozrime sa na príklad CDK.
- Textové pole
Komponent Textové pole poskytuje pomocné programy na prácu s poľami na zadávanie textu. Na zmenu veľkosti vstupov môžete použiť komponenty CDK v textovom poli. Pozrime sa na príklad, ako to implementovať.
Pre app.component.html pilník,
Uhlový materiál CDK
Veľkosť písma 10px 12px 14px 16px 18px 20px Automatická zmena veľkosti textu
Pre app.component.ts súbor, musíte najskôr importovať potrebné komponenty.
importovať {CdkTextareaAutosize} z '@ angular / cdk / text-field' import {NgZone, ViewChild} z '@ angular / core' import {take} z 'rxjs / operator'Teraz musíte do triedy napísať nasledujúci kód.
php ako tlačiť pole
trieda exportu AppComponent {constructor (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}Ďalej musíte importovať MatSelectModule a pridať dovoz: [] časť umiestnená v app.module.ts spis.
Nakoniec musíte svojmu projektu slúžiť na zobrazenie výstupu.
Toto nie je záver a v Angular Materials existuje niekoľko ďalších komponentov. Môžete sa na ne odvolať z oficiálna web stránka uhlového materiálu.
Týmto by som chcel ukončiť svoj blog. Dúfam, že máte jasno v základoch uhlového materiálu.Ak máte pochybnosti alebo otázky týkajúce sa tohto článku, neváhajte ich uverejniť v sekcii komentárov nižšie.
Ak by ste sa chceli dozvedieť všetko, čo ste sa práve dozvedeli z tohto blogu, a viac o Uhlové , a zamerajte svoju kariéru na zdatného vývojového pracovníka Angular, potom zvážte registráciu na našu ' .
Máte na nás otázku? Uveďte to prosím v sekcii komentárov v tomto blogu „Angular Material“ a my sa vám ozveme čo najskôr.