Kas ir leņķiskais materiāls un kā to īstenot?



Šis raksts ļaus jums iepazīties ar leņķiskā materiāla pamatiem un procedūru, kā dažādus UI / UX komponentus instalēt un ieviest leņķī.

UI / UX komponenti leņķī ir pazīstami kā Stūra materiāli. Viņipalīdzēt veikt leņķiskās lietojumprogrammas efektīvi . Tomēr, ja jūs tos vēl nezināt, šeit ir raksts, kas palīdzēs jums detalizēti apgūt leņķiskos materiālus. Arī to iegūt padziļinātas zināšanas par Angular, apsveriet iespēju iestāties ' no Edureka.

Šajā rakstā es apskatīšu šādas tēmas:





Ievads leņķiskajos materiālos

Materiāli tika ieviesti kā dizaina valoda, kuru Google izstrādāja 2014. gadā. Materiālu dizains ir rīkspriekšpuses ietvariem, kas jums palīdz vizuāls , kustība , un mijiedarbība dizains. Tas arī palīdz pielāgoties dažādām ierīcēm un dažādiem ekrāna izmēriem. Pirmkārt, tas tika atzīmēts vietnē AngularJS, lai padarītu šīs lietotnes vairāk pievilcīgs un uzstāties ātrāk . Tad Google pilnībā pārrakstīja kodu no nulles un noņēma JS, t.i. , un nosauca to 2016. gada septembrī. Vēlāk Google atzīmēja materiāla dizainu kā leņķisku, kas izmanto , un nosauca to par leņķa materiāliem.



Stūra materiāla logotips - Stūra materiāla - Edureka

Stūra materiāli vai lietotāja saskarnes (UI) komponenti palīdz izstrādāt jūsu lietojumprogrammu a strukturēts veidā. Viņi piesaista lietotājus un padara to vieglāk piekļūt elementi vai komponenti, kas atrodas jūsu pieteikumā. Tie arī palīdz pievilcīgi un unikāli izstrādāt jūsu lietojumprogrammas stili un formas . Šie komponenti palīdz uzlabot jūsu lietojumprogrammu konsekventi , ātri , daudzpusīgs un pat dizains atsaucīgs vietnēm.



Leņķa materiāla uzstādīšana

Tagad sāksim ar ātru apmācību par leņķisko materiālu instalēšanu. Pirmkārt, pārliecinieties, vai jūsu sistēmā ir instalēts Angular. Ja neesat pazīstams ar Angular, skatiet saiti vietnē . Kad viss ir iestatīts, projektam varat pievienot leņķa materiālus, izmantojot šādu komandu:

no pievienot @ leņķisko / materiālu

Pirmkārt, tā lūgs izvēlēties iepriekš izveidotu motīvu nosaukumu vai pielāgotu motīvu.

Jums jāizvēlas iepriekš izveidota tēma “Indigo / Pink”, kas ir noklusējuma motīvs, lai veidotu lietojumprogrammu. Varat arī izvēlēties motīvu “Pielāgots”, lai varētu pielāgot motīvu failus, kas ietver visus parastos stilus.

Pēc tam tā lūgs iestatīt ĀmursJS . HammerJS ir populāra bibliotēka, ko galvenokārt izmanto Angular lietojumprogrammās. Tas papildina atbalstu tādiem skāriena žestiem kā Swipe, Pan, Pinch, Rotate un daudziem citiem, īpaši mobilajās lietojumprogrammās.

Jūs varat izvēlēties “Jā” vai “Nē”. HammerJS var būt noderīgs, ja lietojat savu lietojumprogrammu mobilajos tālruņos. Tā kā mobilie tālruņi piedāvā skārienjūtīgus displejus, šie žesti ir daudz noderīgāki un var izskatīties moderni jūsu mobilajā lietojumprogrammā.

Pēc tam, kad esat izvēlējies savu izvēli, nākamais tiks lūgts iestatīt Pārlūka animācijas leņķa materiālam.

Lai lietojumprogrammā varētu izmantot animācijas, jums jāizvēlas “Jā”. Leņķiskās animācijas padara jūsu lietojumprogrammu jautrāku un vieglāk lietojamu. Tas var uzlabot jūsu lietotnes un lietotāja pieredzi, kas piesaista lietotāju uzmanību.

Pēc tam tas instalēs leņķiskos materiālus jūsu lietojumprogrammā.

Leņķa materiāla sastāvdaļas

Kā jau minēts iepriekš, leņķa materiāla sastāvdaļas nav nekas cits kā UI / UX Dizaina sastāvdaļas. Tie satur dažādus komponentus, piemēram, veidlapu vadīklas, navigāciju, pogas un indikatorus, uznirstošos logus un daudz ko citu. Šie komponenti palīdz jums ieviest modeļus atbilstoši materiāla dizaina specifikācijai.

Skatīsimies dažus piemērus, kā ieviest šos komponentus savā leņķa lietojumprogrammā.

Navigācija

Pirmkārt, es apspriedīšu navigācijas komponentus.

  • Rīkjosla

Jums jāievada šāds kods app.component.html failu, lai lietojumprogrammā izmantotu rīkjoslas komponentu.

 Leņķa materiāla apmācība 

ir konteiners no leņķa materiāla, ko izmanto galvenēm un nosaukumiem. Krāsa konteineru var mainīt, izmantojot krāsa īpašums.Pēc noklusējuma rīkjoslās tiek izmantota neitrāla fona krāsa, pamatojoties uz pašreizējo motīvu, t.i., vai nu gaiša, vai tumša.Jūs varat izvēlēties trīs noklusējuma motīvus, kas ir: 'primārs' , ‘Akcents’ vai ‘Brīdināt’ .Lai izmantotu šo rīkjoslu, tā vispirms jāimportē app.module.ts failu no leņķa materiāliem, izmantojot šādu komandu:

importēt {MatToolbarModule} no “@ angular / material”

Vēlāk šis modulis jāpievieno arī imports: [] sadaļa, kas atrodas app.module.ts failu.

importē: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],

Mat-Toolbar jums jāpievieno “ MatToolbarModule ”.

Apkalposim jūsu projektu, izmantojot šādu komandu:

no serves -o

Tas atvērs jūsu projektu sistēmas noklusējuma pārlūkprogrammā, kā parādīts zemāk:

Ja vēlaties mainīt rīkjoslas krāsu atbilstoši savai izvēlei, to varat izdarīt ar CSS stila lapas palīdzību. Ļaujiet man parādīt jums piemēru.

Pirmkārt, jums ir jāizdzēš krāsa īpašums no un pēc tam ierakstiet šo CSS kods app.component.css failu.

mat-rīkjosla {background-color: / * izvēlētā krāsa * / color: / * text-color * /}

Tagad kalpojiet savam projektam, lai redzētu rezultātu.

  • Izvēlne

Tālāk es apspriedīšu izvēlnes komponentu. Savā kodā jums jāievada šāds kods app.component.html failu.

 Leņķa materiāla apmācība Izvēlnes iestatījumu palīdzība

Pievienosim dažus stilus Izvēlne pogu. Savā kodā jums jāievada šāds kods app.component.css failu.

.space {flex: 1 1 auto} .btns {width: 100px height: 40px font-size: large border-rādiuss: 10px border: 3px solid # 113c89 background-color: lightcoral}

klase = ”atstarpe” tiek izmantots, lai pievienotu atstarpes starp “Rīkjoslas nosaukums” un “Izvēlnes opcija”.

Gadījumā, ja CSS stila lapa nav jums pazīstama, varat atsaukties uz mūsu emuāru vietnē lai iedziļinātos.

Tāpat kā rīkjoslu, lai izmantotu un konteineros, jums jāievēro tāda pati procedūra kā iepriekš, lai importētu MatMenuModule un MatButtonModule no leņķiskais materiāls un pievienojiet tos imports: [] sadaļa atrodas app.module.ts failu.

Apkalpojiet savu projektu tūlīt, lai parādītu rezultātu.

Veidlapu vadīklas

Tagad es apspriedīšu veidlapas vadības komponentus.

  • Veidlapas lauks

Kā norāda nosaukums, veidlapa-lauks tiek izmantots lietotāja ievadītajām ievadēm. To visbiežāk izmanto lietotāja reģistrēšanai lietojumprogrammā vai vietnē.

Jums jāievada šāds kods app.component.html failu, lai lietojumprogrammā izmantotu komponentu Form-Field.

 

Veidlapu vadīklas

Nosaukums

Kā parasti, jums ir jāimportē MatFormFieldModule un MatInputModule un pievienojiet tos imports: [] sadaļa, kas atrodas app.module.ts failu. Iepriekš minēto kodu parasti izmanto tādu vārdu ievadīšanai kā “Vārds”, “Uzvārds” utt. Jūs pat varat izmantot Validators un padarīt lauku obligātu. Piemēram, to var izmantot laukam E-pasts. Paroļu tekstu var paslēpt vai paslēpt. Lai uzzinātu, pārbaudiet zemāk esošo kodu:

Ievadiet savu e-pasta adresi {{getErrorMessage ()}} Ievadiet paroli {{slēpt? 'visibility_off': 'redzamība'}}

Jūsu app.component.css failu, jums jāpievieno šāds kods:

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

Tagad jūsu app.component.ts failu, jums tas ir jāimportē FormControl un Validatori no @ leņķa / formas direktorijā.

importēt {FormControl, Validators} no “@ angular / formas”

Jums pat jāpievieno teksts, lai parādītu kļūdu šajā klasē.

eksportēt klasi AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('obligāts')? 'Jums jāievada vērtība': this.email.hasError ('email')? 'Nederīgs e-pasts': ''} hide = true}

Atsaucoties uz iepriekš minēto procedūru, jums savā kodā ir jāievada šāds kods app.module.ts failu, lai importētu nepieciešamos moduļus.

importēt {FormsModule, ReactiveFormsModule} no “@ angular / formas” importēt {MatIconModule} no “@ angular / material”

Vēlāk šie moduļi jāpievieno imports: [] sadaļā.

  • Radio poga

Radio pogas parasti izmanto, lai izvēlētos izvēli starp dažādām iespējām. Lai uzzinātu, varat pārbaudīt šo kodu.

Priekš app.component.html fails,

 

Dzimums

Vīrietis sieviete

Priekš app.component.css fails,

mat-radio-button {Padding-left: 50px}

Tagad jums ir jāimportē MatRadioModule un pievienojiet to imports: [] sadaļa, kas atrodas app.module.ts failu.

Vēlāk jums jāapkalpo projekts, lai parādītu rezultātu.

Pārejot uz priekšu, es apspriedīšu leņķa materiāla CDK.

Leņķiskais materiāls CDK

CDK, pazīstams arī kā Component Dev Kit , ir bibliotēka iepriekš noteikta uzvedība leņķa materiālā, kas ir rīku kopums, kas īsteno kopīgu mijiedarbības modeļi un lietojumprogrammas funkcijas . Tam nav neviena materiāla dizainam raksturīga stila. Apskatīsim CDK piemēru.

  • Teksta lauks

Teksta lauka komponents nodrošina utilītas darbam ar teksta ievades laukiem. Teksta laukā varat izmantot CDK komponentus, lai mainītu ievadu lielumu. Apskatīsim piemēru, kā to ieviest.

Priekš app.component.html fails,

 

Leņķiskais materiāls CDK

Fonta lielums 10 pikseļi 12 pikseļi 14 pikseļi 16 pikseļi 18 pikseļi 20 pikseļi Autosize textarea

Priekš app.component.ts failu, vispirms jāimportē nepieciešamie komponenti.

importēt {CdkTextareaAutosize} no '@ angular / cdk / text-field' importēt {NgZone, ViewChild} no '@ angular / core' importēt {take} no 'rxjs / operators'

Tagad klasē jums jāievada šāds kods.

kāda ir atšķirība starp abstrakto klasi un saskarni
eksportēt klasi AppComponent {constructor (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}

Tālāk jums jāimportē MatSelectModule un pievienojiet to imports: [] sadaļa, kas atrodas app.module.ts failu.

Visbeidzot, jums jāapkalpo projekts, lai parādītu rezultātu.

Tas nav secinājums, un leņķiskajos materiālos ir vairākas citas sastāvdaļas. Jūs varat atsaukties uz tiem no oficiālā mājas lapa no leņķiskā materiāla.

Ar šo es gribētu beigt savu emuāru. Es ceru, ka jums ir skaidrs leņķiskā materiāla pamati.Ja jums ir šaubas vai jautājumi par šo rakstu, nevilcinieties tos ievietot zemāk esošajā komentāru sadaļā.

Ja vēlaties uzzināt visu, ko tikko uzzinājāt no šī emuāra, un vairāk Stūraina un virziet savu karjeru uz prasmīgu leņķa izstrādātāju, pēc tam apsveriet iespēju iestāties mūsu programmā ' .

Vai mums ir jautājums? Lūdzu, pieminējiet to šī “Angular Material” emuāra komentāru sadaļā, un mēs sazināsimies ar jums pēc iespējas ātrāk.