Mis on nurgamaterjal ja kuidas seda rakendada?

UI / UX komponendid nurkades on tuntud kui Nurgamaterjalid. Nemadaitab nurkrakendustel toimida tõhusalt . Kuid kui te pole neist veel teadlikud, on siin artikkel, mis aitab teil nurgamaterjale üksikasjalikult õppida. Samuti to saada põhjalikke teadmisi nurkade kohta, kaaluge sisseastumist ' Edurekast.

Selles artiklis käsitlen järgmisi teemasid:

• Sissejuhatus nurgamaterjalidesse
• Nurga materjali paigaldamine
• Nurga materjalist komponendid
  • Navigeerimine
    1. Tööriistariba
    2. Menüü
  • Vormi juhtelemendid
    1. Vormi väli
    2. Raadio nupp
• Nurga materjal CDK
  • Tekstiväli

Sissejuhatus nurgamaterjalidesse

Materjalid võeti kasutusele disainikeelena, mille Google töötas välja 2014. aastal. Materjali kujundus on tööriistesiotsa raamistike jaoks, mis aitab teil visuaalne , liikumine ja suhtlemist kujundus. Samuti aitab see teil kohaneda erinevates seadmetes ja erineva ekraanisuurusega. Esiteks märgiti see AngularJS-i, et neid rakendusi veelgi paremaks muuta atraktiivne ja esineda kiiremini . Seejärel kirjutas Google koodi nullist täielikult uuesti ja eemaldas JS st. ja pani sellele nime septembris 2016. Hiljem märkis Google Material Design nurgeliseks, mis kasutab ja nimetas selle nurgamaterjalideks.

Nurgamaterjalid või kasutajaliidese (UI) komponendid aitavad teil oma rakendust a struktureeritud viisil. Nad meelitavad kasutajaid ja saavad sellega hakkama lihtsamini ligipääsetav teie rakenduses sisalduvad elemendid või komponendid. Samuti aitavad need kujundada teie rakendusi atraktiivsel viisil, ainulaadselt stiilid ja kujundid . Need komponendid aitavad teie rakendust veelgi muuta järjekindel , kiiresti , mitmekülgne ja isegi disain reageeriv veebisaitidel.

Nurga materjali paigaldamine

Alustame nüüd kiirmaterjaliga nurgamaterjalide installimise kohta. Kõigepealt veenduge, et teie süsteemi oleks installitud nurk. Kui te pole Angulariga tuttav, vaadake lehel olevat linki . Kui olete kõik seadistanud, saate nurkmaterjalid oma projekti lisada järgmise käsu abil:

lisage @ nurk / materjal

Kõigepealt palub see teil valida eelnevalt koostatud teema nime või kohandatud teema.

Rakenduse kujundamiseks peate valima eeltoodud teema „Indigo / Pink”. Samuti saate valida teema „Kohandatud”, et saaksite kohandada oma teemafaile, mis sisaldavad kõiki levinumaid stiile.

Järgmisena palub see teil seadistada VasarJS . HammerJS on populaarne raamatukogu, mida kasutatakse peamiselt nurkrakendustes. See lisab tuge puutežestidele nagu pühkimine, panoraamimine, näputäis, pööramine ja palju muud, eriti mobiilirakendustes.

Võite valida kas „Jah“ või „Ei“. HammerJS võib olla kasulik, kui kasutate oma rakendust mobiiltelefonides. Kuna mobiiltelefonid pakuvad puuteekraane, on need žestid kasulikumad ja võivad teie mobiilirakenduses trendikad välja näha.

Pärast valiku valimist palub see teil järgmiseks seadistada Brauseri animatsioonid nurgamaterjali jaoks.

Peate valima „Jah”, et saaksite oma rakenduses kasutada animatsioone. Nurgaanimatsioonid muudavad teie rakenduse lõbusamaks ja hõlpsamini kasutatavaks. See võib teie rakendust ja kasutuskogemust parandada, mis meelitab kasutajate tähelepanu.

Seejärel installib see teie rakendusse nurkmaterjalid.

Nurga materjalist komponendid

Nagu varem mainitud, pole nurgamaterjali komponendid muud kui UI / UX Disaini komponendid. Need sisaldavad mitmesuguseid komponente, nagu vormikontroll, navigeerimine, nupud ja indikaatorid, hüpikud ja palju muud. Need komponendid aitavad teil rakendada mustreid vastavalt materjalidisaini spetsifikatsioonile.

Edasi liikudes näeme mõningaid näiteid selle kohta, kuidas neid komponente oma nurgarakenduses rakendada.

Navigeerimine

Kõigepealt käsitlen navigeerimise komponente.

• Tööriistariba

Peate tippima järgmise koodi app.component.html fail, et kasutada oma rakenduses tööriistariba komponenti.

 Nurga materjali õpetus 

on nurkmaterjalist konteiner, mida kasutatakse päiste ja pealkirjade jaoks. Värv konteinerit saab muuta, kasutades värv vara.Vaikimisi kasutavad tööriistaribad praeguse teema põhjal neutraalset taustavärvi, st kas heledat või tumedat.Võite valida kolm vaiketeemat, milleks on: 'Esmane' , 'Aktsent' või 'Hoiatama' .Selle tööriistariba kasutamiseks peate selle kõigepealt importima app.module.ts fail nurkmaterjalidest järgmise käsuga:

importige {MatToolbarModule} '@ nurk / materjal'

Hiljem peate selle mooduli lisama ka import: [] jaotis, mis asub app.module.ts faili.

impordib: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],

Mat-tööriistariba jaoks peate lisama MatToolbarMoodule ”.

Teenime nüüd teie projekti järgmise käsuga:

serveerimisest -o

See avab teie projekti teie süsteemi vaikebrauseris, nagu allpool näidatud:

Kui soovite tööriistariba värvi vastavalt oma valikule muuta, saate seda teha CSS-i stiililehe abil. Lubage mul näidata teile üks näide.

Esiteks peate kustutama värv vara alates ja seejärel tippige järgmine CSS kood app.component.css faili.

mat-tööriistariba {background-color: / * valitud värv * / color: / * text-color * /}

Nüüd teenige tulemuse nägemiseks oma projekti.

• Menüü

Järgmisena käsitlen menüükomponenti. Peate sisestama oma koodi järgmise koodi app.component.html faili.

 Nurga materjali õpetus Menüü Seaded Abi

Lisame lehele Menüü nuppu. Peate sisestama oma koodi järgmise koodi app.component.css faili.

.space {flex: 1 1 auto} .btns {laius: 100px kõrgus: 40px fondisuurus: suur äärisraadius: 10px ääris: 3px kindel # 113c89 taustavärv: lightcoral}

klass = ”tühik” kasutatakse vahemike lisamiseks tööriistariba nime ja menüüvalikute vahel.

Juhul, kui te pole CSS-i stiilitabeliga tuttav, võite viidata meie ajaveebile süvenema.

Täpselt nagu tööriistariba kasutada ja konteinerite importimiseks peate järgima ülaltoodud protseduuri MatMenuMoodule ja MatButtonMoodul alates nurgeline materjal ja lisage need sisse import: [] jaotis asub app.module.ts faili.

Serveerige oma projekti kohe väljundi kuvamiseks.

Vormi juhtelemendid

Nüüd käsitlen vormikontrolli komponente.

• Vormi väli

Nagu nimigi ütleb, kasutatakse vormi-välja kasutaja sisestatud sisendite jaoks. Seda kasutatakse kõige sagedamini kasutaja registreerimiseks rakenduses või veebisaidil.

Peate tippima järgmise koodi app.component.html faili, et kasutada oma rakenduses komponenti Vormivälja.

 
Vormi juhtelemendid
Nimi

Nagu tavaliselt, peate importima MatFormFieldModule ja MatInputModule ja lisage need sisse import: [] jaotis, mis asub app.module.ts faili. Ülaltoodud koodi kasutatakse tavaliselt selliste nimede sisestamiseks nagu 'eesnimi', 'perekonnanimi' jne. Võite kasutada isegi valideerijaid ja muuta välja kohustuslikuks. Näiteks saate seda kasutada välja E-mail jaoks. Paroolide teksti saate peita või peita. Tutvuge allpool toodud koodiga:

Sisestage oma e-posti aadress {{getErrorMessage ()}} Sisestage oma parool {{hide? 'visibility_off': 'nähtavus'}}

Teie app.component.css faili, peate lisama järgmise koodi:

.example-container {padding-left: 50px}

Nüüd teie app.component.ts faili, peate importima FormControl ja Valideerijad alates @ nurgeline / vormid kataloogi.

importige {FormControl, Validators} kaustast @ @ nurk / vormid

Järgmises klassis tõrke kuvamiseks peate isegi teksti lisama.

eksportklass AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {tagastab this.email.hasError ('kohustuslik')? 'Peate sisestama väärtuse': this.email.hasError ('email')? 'Kehtetu e-posti aadress': ''} hide = true}

Viidates ülaltoodud protseduurile, peate oma koodi sisestama järgmise koodi app.module.ts fail vajalike moodulite importimiseks.

importige {FormsModule, ReactiveFormsModule} kaustast @ @ nurk / vormid import {MatIconModule} kaustast @ @ nurk / materjal

Hiljem peate need moodulid sisse lisama import: [] jaotises.

• Raadio nupp

Raadionuppe kasutatakse tavaliselt erinevate valikute vahel valiku valimiseks. Viitamiseks võite vaadata järgmist koodi.

Sest app.component.html fail,

 
Sugu
Mees naine

Sest app.component.css fail,

matt-raadionupp {polster vasakul: 50px}

Nüüd peate importima MatRadioMoodul ja lisage see sisse import: [] jaotis, mis asub app.module.ts faili.

Hiljem peate väljundi kuvamiseks oma projekti teenindama.

Edasi liikudes arutlen nurgamaterjali CDK üle.

Nurga materjal CDK

CDK, tuntud ka kui Component Dev Kit on raamatukogu ettemääratud käitumine nurgamaterjalis, mis on tööriistade komplekt, mis rakendab ühist suhtlemismustrid ja rakenduse funktsioonid . Sellel pole materjali kujundusele spetsiifilist stiili. Vaatame CDK näidet.

• Tekstiväli

Tekstivälja komponent pakub utiliite tekstisisestusväljadega töötamiseks. Sisendite suuruse muutmiseks saate kasutada tekstivälja CDK-komponente. Vaatame näite, kuidas seda rakendada.

Sest app.component.html fail,

 
Nurga materjal CDK
Fondi suurus 10px 12px 14px 16px 18px 20px Automaatne teksti ala

Jaoks app.component.ts faili, peate kõigepealt importima vajalikud komponendid.

importige {CdkTextareaAutosize} '@ angular / cdk / text-field'ilt importige {NgZone, ViewChild} kaustast' @ angular / core 'import {take}' rxjs / operators'ilt

Nüüd peate klassi sisestama järgmise koodi.

java addactionlistener (see)

eksportklass AppComponent {constructor (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}

Järgmisena peate importima MatSelectModule ja lisage see sisse import: [] jaotis, mis asub app.module.ts faili.

Lõpuks peate väljundi kuvamiseks oma projekti teenindama.

See pole järeldus ja nurgamaterjalides on veel mitu komponenti. Neile saate viidata ametlik koduleht nurgamaterjalist.

Sellega tahaksin oma blogi lõpetada. Loodan, et teil on nurgamaterjali põhialuste osas selge.Kui teil on selle artikli suhtes kahtlusi või küsimusi, ärge kartke neid postitada allolevasse kommentaaride jaotisesse.

Kui soovite õppida kõike seda, mida just sellest blogist õppisite, ja palju muud Nurgeline ja suunake oma karjäär asjatundliku nurgakujundaja poole, seejärel kaaluge meie registreerumist ' .

Kas teil on meile küsimus? Palun mainige seda selle 'Nurgamaterjali' ajaveebi kommentaaride osas ja võtame teiega ühendust niipea kui võimalik.