UI / UX komponenty v Angular, jsou známé jako Úhlové materiály. Onypomáhají provádět úhlové aplikace efektivně . Pokud o nich však ještě nevíte, zde je článek, který vám pomůže podrobně se naučit úhlové materiály. Také to získat podrobnou znalost Angular, zvážit registraci ' od Edureky.
V tomto článku se budu věnovat následujícím tématům:
- Úvod do hranatých materiálů
- Úhlová instalace materiálu
- Součásti úhlového materiálu
- Úhlový materiál CDK
Úvod do hranatých materiálů
Materiály byly představeny jako designový jazyk vyvinutý společností Google v roce 2014. Materiálové provedení je nástrojpro rozhraní front-end, což vám pomůže vizuální , pohyb , a interakce design. Pomůže vám také přizpůsobit se různým zařízením a různým velikostem obrazovky. Nejprve byl označen na AngularJS, aby byly tyto aplikace více přitažlivý a hrát rychlejší . Poté Google úplně přepsal kód od začátku a odstranil JS, tj. a pojmenoval to v září 2016. Později Google označil Material Design na Angular, který používá a pojmenovali jej Úhlové materiály.
Úhlové materiály nebo komponenty uživatelského rozhraní (UI) vám pomohou navrhnout aplikaci v a strukturovaný způsob. Přitahují uživatele a dělají to snadnější přístup prvky nebo komponenty přítomné ve vaší aplikaci. Pomáhají také při navrhování vašich aplikací atraktivním a jedinečným způsobem styly a tvary . Tyto komponenty pomáhají vylepšovat vaši aplikaci konzistentní , rychle , univerzální a dokonce i design citlivý webové stránky.
Úhlová instalace materiálu
Začněme s rychlým návodem, jak nainstalovat Angular Materials. Nejprve se ujistěte, že máte v systému nainstalován Angular. Pokud nejste obeznámeni s Angular, podívejte se na odkaz na . Jakmile máte vše nastaveno, můžete do projektu přidat úhlové materiály pomocí následujícího příkazu:
of add @ angular / material
Nejprve vás požádá o výběr předem vytvořeného názvu motivu nebo vlastního motivu.
Musíte vybrat předem připravené téma „Indigo / Pink“, které je výchozím motivem pro stylování vaší aplikace. Můžete také zvolit motiv „Vlastní“, abyste mohli přizpůsobit soubory motivů, které obsahují všechny běžné styly.
Dále vás požádá o nastavení HammerJS . HammerJS je populární knihovna, která se používá hlavně v úhlové aplikaci. Přidává podporu pro dotyková gesta jako Swipe, Pan, Pinch, Rotate a mnoho dalších, zejména v mobilních aplikacích.
Můžete zvolit „Ano“ nebo „Ne“. HammerJS může být užitečný, když používáte aplikaci na mobilních zařízeních. Protože mobilní telefony nabízejí dotykové displeje, jsou tato gesta užitečnější a mohou ve vaší mobilní aplikaci vypadat trendy.
Poté, co si vyberete svou volbu, vás požádá o nastavení Animace prohlížeče pro úhlový materiál.
Chcete-li ve své aplikaci používat animace, musíte zvolit „Ano“. Díky úhlovým animacím bude vaše aplikace zábavnější a snáze použitelná. To může zlepšit vaši aplikaci a uživatelské prostředí, které přitahuje pozornost uživatelů.
Následně se do aplikace nainstalují Angular Materials.
Součásti úhlového materiálu
Jak již bylo zmíněno dříve, komponenty úhlového materiálu nejsou nic jiného než UI / UX Konstrukční komponenty. Obsahují celou řadu komponent, jako jsou ovládací prvky formulářů, navigace, tlačítka a indikátory, vyskakovací okna a mnoho dalších. Tyto komponenty vám pomohou implementovat vzory podle specifikace Material Design.
Pokračujeme, podívejme se na několik příkladů, jak implementovat tyto komponenty do vaší úhlové aplikace.
Navigace
Nejprve proberu komponenty v Navigaci.
- Panel nástrojů
Musíte zadat následující kód do app.component.html soubor pro použití komponenty Toolbar ve vaší aplikaci.
Výukový program pro úhlové materiály je kontejner z materiálu Angular, který se používá pro záhlaví a tituly. Barva kontejner lze změnit pomocí barva vlastnictví.Ve výchozím nastavení používají panely nástrojů neutrální barvu pozadí založenou na aktuálním motivu, tj. Buď světlou nebo tmavou.Můžete si vybrat tři výchozí motivy, kterými jsou: 'hlavní' , 'přízvuk' nebo 'varovat' .Chcete-li použít tento panel nástrojů, musíte jej nejprve importovat dovnitř app.module.ts soubor z úhlových materiálů pomocí následujícího příkazu:
importovat {MatToolbarModule} z '@ angular / material'Později je také nutné přidat tento modul do dovoz: [] část umístěná v app.module.ts soubor.
importy: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
U Mat-Toolbar musíte přidat „ MatToolbarModule “.
Pojďme nyní sloužit vašemu projektu pomocí následujícího příkazu:
sloužit -o
Tím se váš projekt otevře ve výchozím prohlížeči vašeho systému, jak je uvedeno níže:
Chcete-li změnit barvu panelu nástrojů podle svého výběru, můžete to udělat pomocí šablony stylů CSS. Ukážu vám příklad.
Nejprve musíte vymazat barva majetek z kontejner a poté zadejte následující CSS kód v app.component.css soubor.
panel nástrojů mat {barva pozadí: / * barva dle vašeho výběru * / barva: / * barva textu * /}Nyní slouží vašemu projektu, abyste viděli výsledek.
- Jídelní lístek
Dále budu diskutovat o komponentě nabídky. Musíte zadat následující kód do svého app.component.html soubor.
Výukový program pro úhlové materiály Nabídka Nastavení NápovědaPojďme přidat styling na Jídelní lístek knoflík. Musíte zadat následující kód do svého app.component.css soubor.
.space {flex: 1 1 auto} .btns {width: 100px height: 40px font-size: large border-radius: 10px border: 3px solid # 113c89 background-color: lightcoral}třída = ”mezera” se používá k přidání mezer mezi „Název panelu nástrojů“ a „Možnost nabídky“.
Pokud nejste obeznámeni se šablonou stylů CSS, můžete se podívat na náš blog na dostat se do hloubky.
Stejně jako Panel nástrojů použít a kontejnery, musíte při importu postupovat stejným způsobem jako výše MatMenuModule a MatButtonModule z hranatý materiál a přidejte je dovoz: [] sekce umístěná v app.module.ts soubor.
Slouží váš projekt nyní k zobrazení výstupu.
Ovládací prvky formuláře
Nyní budu diskutovat o komponentách ve Form Control.
- Pole formuláře
Jak název napovídá, Form-Field se používá pro vstupy zadané uživatelem. Nejčastěji se používá k registraci uživatele v aplikaci nebo na webu.
Musíte zadat následující kód do app.component.html soubor pro použití komponenty Form-Field ve vaší aplikaci.
Ovládací prvky formuláře
název
Jako obvykle je třeba importovat MatFormFieldModule a MatInputModule a přidejte je dovoz: [] část umístěná v app.module.ts soubor. Výše uvedený kód se obecně používá k zadávání jmen jako „Křestní jméno“, „Příjmení“ atd. Můžete dokonce použít Validátory a nastavit pole jako povinné. Můžete jej například použít pro pole E-mail. Text pro Hesla můžete skrýt nebo zobrazit. Pro informaci si přečtěte níže uvedený kód:
Zadejte svůj e-mail {{getErrorMessage ()}} Zadejte své heslo {{skrýt? 'visibility_off': 'visibility'}}Ve vašem app.component.css souboru, musíte přidat následující kód:
.example-container {padding-left: 50px}Nyní ve vašem app.component.ts soubor, musíte importovat FormControl a Validátoři z @ úhlové / formy adresář.
importovat {FormControl, Validators} z '@ angular / forms'Musíte dokonce přidat text, abyste zobrazili chybu uvnitř následující třídy.
třída exportu AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('required')? „Musíte zadat hodnotu“: this.email.hasError („email“)? 'Not a valid email': ''} hide = true}S odkazem na výše uvedený postup musíte do svého kódu zadat následující kód app.module.ts soubor pro import potřebných modulů.
importovat {FormsModule, ReactiveFormsModule} z '@ angular / forms' import {MatIconModule} z '@ angular / material'Později musíte tyto moduly přidat dovoz: [] sekce.
- Přepínač
Rádiová tlačítka se obecně používají k výběru možnosti z různých možností. Můžete si prohlédnout následující kód pro referenci.
Pro app.component.html soubor,
Rod
Muž žena
Pro app.component.css soubor,
radio-button-mat {Padding-left: 50px}Nyní musíte importovat MatRadioModule a přidejte to dovoz: [] část umístěná v app.module.ts soubor.
Později musíte svůj projekt sloužit k zobrazení výstupu.
Do budoucna budu diskutovat o Angular Material CDK.
Úhlový materiál CDK
CDK, také známý jako Sada pro vývoj komponent , je knihovna předdefinované chování v Angular Material, což je sada nástrojů, které implementují běžné interakční vzory a funkce aplikace . Nemá žádný styling specifický pro Material Design. Podívejme se na příklad CDK.
- Textové pole
Komponenta Textové pole poskytuje nástroje pro práci s poli pro zadávání textu. Ke změně velikosti vstupů můžete použít komponenty CDK v textovém poli. Podívejme se na příklad, jak to provést.
Pro app.component.html soubor,
Úhlový materiál CDK
Velikost písma 10px 12px 14px 16px 18px 20px Automatická velikost textové oblasti
Pro app.component.ts souboru, musíte nejprve importovat nezbytné součásti.
importovat {CdkTextareaAutosize} z '@ angular / cdk / text-field' importovat {NgZone, ViewChild} z '@ angular / core' import {take} z 'rxjs / operator'Nyní musíte do třídy zadat následující kód.
Výukový program pro integraci serverů SQL do SSIS
třída exportu AppComponent {konstruktor (soukromý _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}Dále musíte importovat MatSelectModule a přidejte to dovoz: [] část umístěná v app.module.ts soubor.
Nakonec musíte svůj projekt sloužit k zobrazení výstupu.
To není závěr a v Angular Materials existuje několik dalších komponent. Můžete se na ně odvolat z oficiální webové stránky úhlového materiálu.
Tímto bych chtěl ukončit svůj blog. Doufám, že máte jasno v základech Úhlového materiálu.Máte-li jakékoli pochybnosti nebo dotazy týkající se tohoto článku, neváhejte je zveřejnit v sekci komentářů níže.
Pokud se chcete dozvědět vše, co jste se právě dozvěděli z tohoto blogu, a další informace Úhlové a zaměřte svou kariéru na zdatného vývojáře Angular Developer, pak zvažte registraci na naši ' .
Máte na nás dotaz? Uveďte to prosím v sekci komentářů tohoto blogu „Angular Material“ a my se vám ozveme co nejdříve.