Az UI / UX komponensek Angular néven Szögletes anyagok. Őksegítség a szögletes alkalmazások elvégzéséhez hatékonyan . Azonban, ha még nem ismeri őket, itt van egy cikk, amely segít megismerni a szögletes anyagokat. Továbbá, to szerezzen alapos ismereteket az Angularról, fontolja meg a beiratkozást ' Edurekától.
Ebben a cikkben a következő témákat fogom áttekinteni:
- Bevezetés a szögletes anyagokba
- Szögletes anyag telepítése
- Szögletes anyag alkatrészek
- Szöganyag CDK
Bevezetés a szögletes anyagokba
Anyagok tervezési nyelvként vezették be, amelyet a Google fejlesztett ki 2014-ben. Anyagtervezés egy eszköza front-end keretrendszerekhez, ami segít vizuális , mozgás , és kölcsönhatás tervezés. Ez segít a különböző eszközökön és a különböző képernyőméretekben való alkalmazkodásban is. Először az AngularJS címkével látták el, hogy ezek az alkalmazások tovább fejlődjenek vonzó és előadják gyorsabban . Ezután a Google teljesen újraírta a kódot a semmiből, és eltávolította a JS-t, azaz. , és elnevezte Később a Google a Material Design-t szögletesre jelölte, amely a következőt használja: , és szögletes anyagoknak nevezte el.
Szögletes anyagok vagy a felhasználói felület (UI) összetevői segítenek megtervezni az alkalmazást a strukturált módon. Vonzza a felhasználókat, és sikerül könnyebben hozzáférhető az alkalmazásában jelen lévő elemek vagy alkatrészek. Segítenek az alkalmazások vonzó és egyedi tervezésében is stílusok és formák . Ezek az összetevők segítenek abban, hogy az alkalmazásod még jobb legyen következetes , gyors , sokoldalú és még a tervezés is fogékony weboldalak.
Szögletes anyag telepítése
Kezdjük egy gyors oktatóanyaggal az Angular Materials telepítéséről. Először is, győződjön meg arról, hogy a rendszerbe telepítve van-e az Angular. Ha még nem ismeri az Angular-t, olvassa el a linket . Miután mindent beállított, a következő paranccsal hozzáadhatja a szögletes anyagokat a projektjéhez:
hozzáadása @ szögletes / anyag
Először arra kéri, hogy válasszon előre elkészített téma nevet vagy egyéni témát.
Ki kell választania az „Indigo / Pink” előre elkészített témát, amely az alkalmazás stílusának alapértelmezett témája. Kiválaszthatja az „Egyéni” témát is, hogy testre szabhassa a témafájlokat, amelyek tartalmazzák az összes általános stílust.
Ezután felkéri Önt a beállításra HammerJS . A HammerJS egy népszerű könyvtár, amelyet főleg az Angular alkalmazásban használnak. Támogatja az érintési gesztusokat, mint például a Swipe, Pan, Pinch, Rotate és még sok más, különösen a mobilalkalmazásokban.
Választhatja az „Igen” vagy a „Nem” lehetőséget. A HammerJS hasznos lehet, ha alkalmazását mobilon használja. Mivel a mobilok érintőképernyőket kínálnak, ezek a gesztusok hasznosabbak, és divatosnak tűnhetnek a mobilalkalmazásban.
Miután kiválasztotta a választást, a következő lépésben felkéri Önt a beállításra Böngésző animációk a szögletes anyaghoz.
Az „Igen” lehetőséget kell választania, hogy animációkat használhasson alkalmazásában. A szögletes animációk szórakoztatóbbá és könnyebben használhatóvá teszik az alkalmazást. Ez javíthatja az alkalmazás és a felhasználói élményt, ami felkelti a felhasználók figyelmét.
Ezt követően ez telepíti az Angular Materials alkalmazást.
Szögletes anyag alkatrészek
Mint korábban említettük, a szögletes anyag alkatrészek nem más, mint UI / UX Design alkatrészek. Különféle komponenseket tartalmaznak, mint az űrlapvezérlők, a navigáció, a gombok és indikátorok, az előugró ablakok és még sok más. Ezek az alkatrészek segítenek az Anyagtervezés specifikáció szerinti minták megvalósításában.
Előre haladva nézzünk meg néhány példát ezeknek az összetevőknek a szögletes alkalmazásában történő megvalósítására.
Navigáció
Először a Navigációban tárgyalom az összetevőket.
- Eszköztár
A következő kódot kell beírnia a app.component.html fájlt az Eszköztár összetevő alkalmazásához.
Szögletes anyag bemutató egy szögletes anyagból készült tartály, amelyet fejlécekhez és címekhez használnak. A színe a konténer a szín ingatlan.Alapértelmezés szerint az eszköztárak semleges háttérszínt használnak az aktuális téma alapján, azaz világosak vagy sötétek.Három alapértelmezett témát választhat: 'elsődleges' , 'hangsúly' , vagy 'figyelmeztet' .Az eszköztár használatához először be kell importálnia app.module.ts fájl a Szögletes anyagokból a következő paranccsal:
importálja a {MatToolbarModule} fájlt a '@ angular / material' fájlbólKésőbb hozzá kell adnia ezt a modult a import: [] szakaszban található app.module.ts fájl.
importálja: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
A Mat-Eszköztárhoz hozzá kell adnia a MatToolbarModule ”.
Most szolgáljuk ki a projektet a következő paranccsal:
tálalás -o
Ez megnyitja a projektet a rendszer alapértelmezett böngészőjén, az alábbiak szerint:
Ha az eszköztár színét a választása szerint szeretné megváltoztatni, a CSS stíluslap segítségével megteheti. Hadd mutassak egy példát.
Először törölnie kell szín ingatlantól konténert, majd írja be a következőt CSS kódot a app.component.css fájl.
mat-toolbar {háttér-szín: / * az Ön által választott szín * / szín: / * szöveg-szín * /}Most szolgálja ki a projektet, hogy lássa az eredményt.
- Menü
Ezután a Menu Component-t tárgyalom. A következő kódot kell beírnia a app.component.html fájl.
Szögletes anyag bemutató Menü Beállítások SúgóAdjunk hozzá néhány stílust a Menü gomb. A következő kódot kell beírnia a app.component.css fájl.
.space {flex: 1 1 auto} .btns {szélesség: 100px magasság: 40px betűméret: nagy szegélysugár: 10px szegély: 3px szilárd # 113c89 háttérszín: lightcoral}class = ”szóköz” az „Eszköztár neve” és a „Menü opció” közötti távolság hozzáadására szolgál.
Abban az esetben, ha nem ismeri a CSS-stíluslapot, akkor tekintse meg a blogunkat hogy elmélyüljön.
Csakúgy, mint az Eszköztár és konténerek importálásához ugyanazt az eljárást kell követnie, mint fent MatMenuModule és MatButtonModule tól től szögletes anyag és adja hozzá őket import: [] szakaszban található szakasz app.module.ts fájl.
A kimenet megjelenítéséhez most szolgálja a projektet.
Form Controls
Most a Form Control elemeket fogom megvitatni.
- Űrlapmező
Ahogy a neve is sugallja, a Form-Field mezőt használjuk a felhasználó által megadott bemenetekre. Leggyakrabban egy felhasználó regisztrálására használják, egy alkalmazásban vagy egy webhelyen.
A következő kódot kell beírnia a app.component.html fájl a Form-Field komponens használatához az alkalmazásban.
Form Controls
Név
Szokás szerint importálnia kell MatFormFieldModule és MatInputModule és adja hozzá őket import: [] szakaszban található app.module.ts fájl. A fenti kódot általában olyan nevek bevitelére használják, mint „Keresztnév”, „Vezetéknév”, stb. Akár Validatorokat is használhat, és kötelezővé teheti a mezőt. Használhatja például az E-mail mezőben. Elrejtheti vagy elrejtheti a Jelszavak szöveget. Tájékoztatásul nézze meg az alábbi kódot:
Adja meg e-mail címét {{getErrorMessage ()}} Írja be jelszavát {{hide? 'visibility_off': 'láthatóság'}}A te app.component.css fájlt, hozzá kell adnia a következő kódot:
.example-container {padding-left: 50px}Most a te app.component.ts fájlt, importálnia kell FormControl és Validátorok tól től @ szögletes / formák Könyvtár.
importálja a {FormControl, Validators} alkalmazást a '@ angular / form' fájlbólMég a szöveget is hozzá kell adnia, hogy hiba jelenjen meg a következő osztályon belül.
exportálási osztály AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('kötelező')? 'Értéket kell megadnia': this.email.hasError ('email')? 'Nem érvényes e-mail': ''} hide = true}A fenti eljárásra hivatkozva be kell írnia a következő kódot a app.module.ts fájlt a szükséges modulok importálásához.
importálja a {FormsModule, ReactiveFormsModule} fájlt a '@ angular / form' fájlból importálja a {MatIconModule} fájlt a '@ angular / material' fájlbólKésőbb ezeket a modulokat hozzá kell adnia a import: [] szakasz.
- Rádiógomb
A rádiógombokat általában a különböző lehetőségek közötti választáshoz használják. A következő kódot tekintheti meg referenciaként.
Mert app.component.html fájl,
Nem
Férfi nő
Mert app.component.css fájl,
mat-rádió-gomb {Párna-bal: 50px}Most importálnia kell MatRadioModule és adja hozzá import: [] szakaszban található app.module.ts fájl.
Később a kimenet megjelenítéséhez ki kell szolgálnia a projektet.
Előre haladva megvitatom az Angular Material CDK-t.
Szöganyag CDK
CDK, más néven Component Dev Kit , egy könyvtár előre meghatározott viselkedések a Szögletes anyagban, amely egy olyan eszközkészlet, amely megvalósítja a közös interakciós minták és alkalmazás jellemzői . Nem rendelkezik az Anyagtervezésre jellemző stílusokkal. Lássunk egy példát a CDK-ra.
- Szövegmező
A Szövegmező komponens segédprogramokat biztosít a szövegbeviteli mezőkkel való munkához. A szövegmező CDK-összetevőit használhatja a bemenetek átméretezéséhez. Lássunk egy példát annak megvalósítására.
Mert app.component.html fájl,
Szöganyag CDK
Betűméret 10px 12px 14px 16px 18px 20px Textarea automatikus méretezése
A app.component.ts fájlt, először be kell importálnia a szükséges összetevőket.
importálja a (z) {CdkTextareaAutosize} fájlt a '@ angular / cdk / text-field' fájlból importálhatja {NgZone, ViewChild} a '@ angular / core' importból {take}Most be kell írnia a következő kódot az osztályba.
adatok keverése a 10. táblában
exportálási osztály AppComponent {constructor (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}Ezután importálnia kell MatSelectModule és adja hozzá import: [] szakaszban található app.module.ts fájl.
Végül meg kell szolgálnia a projektet a kimenet megjelenítéséhez.
Ez nem a következtetés, és a szögletes anyagoknak számos más összetevője van. Hivatkozhat rájuk a hivatalos honlapján szögletes anyagból.
Ezzel szeretném befejezni a blogomat. Remélem, tisztában van a szögletes anyag alapjaival.Ha bármilyen kétsége van vagy kérdése van a cikkel kapcsolatban, ne habozzon feltenni őket az alábbi megjegyzések részben.
Ha szeretné megtudni mindazt, amit most ebből a blogból tanult, és még többet Szögletes , és irányítsa karrierjét egy hozzáértő Angular Developer felé, majd fontolja meg, hogy beiratkozik a mi oldalunkra ' .
Van egy kérdésünk? Kérjük, említse meg ennek a „Szögletes anyag” blognak a megjegyzés rovatában, és a lehető leghamarabb kapcsolatba lépünk Önnel.