Ang mga bahagi ng UI / UX sa Angular, ay kilala bilang Mga Kagamitan sa Angular. Silatulungan ang Angular Applications na gumanap mahusay . Gayunpaman, kung hindi mo pa alam ang mga ito, narito ang isang artikulo upang matulungan kang matuto nang detalyado ng Mga Materyal ng Angular. Gayundin, to makakuha ng malalim na kaalaman sa Angular, isaalang-alang ang pag-enrol sa ' mula sa Edureka.
Sa artikulong ito, tatalakayin ko ang mga sumusunod na paksa:
- Panimula sa Mga Kagamitan sa Angular
- Pag-install ng Angular Material
- Mga Bahagi ng Materyal na Angular
- Angular Material CDK
Panimula sa Mga Kagamitan sa Angular
Mga Kagamitan ay ipinakilala bilang isang disenyo ng wika na binuo ng Google noong 2014. Disenyo ng Materyal ay isang kasangkapanpara sa mga balangkas ng front-end, na makakatulong sa iyo biswal , paggalaw , at pakikipag-ugnayan disenyo Tinutulungan ka din nitong umangkop sa iba't ibang mga aparato at iba't ibang laki ng screen. Una, na-tag ito sa AngularJS upang gawing higit ang mga app na ito kaakit-akit at gumanap mas mabilis . Pagkatapos, ganap na muling isinulat ng Google ang code mula sa simula at inalis ang JS i.e. , at pinangalanan ito noong Setyembre 2016. Kalaunan, na-tag ng Google ang Material Design sa Angular, na gumagamit , at pinangalanan itong Angular Materials.
Mga Kagamitan sa Angular o Mga sangkap ng User-Interface (UI) na makakatulong sa iyo upang idisenyo ang iyong aplikasyon sa a nakabalangkas paraan Naaakit nila ang mga gumagamit at ginagawa ito mas madaling ma-access ang mga elemento o mga sangkap na naroroon sa iyong aplikasyon. Tumutulong din ang mga ito sa pagdidisenyo ng iyong mga application sa isang kaakit-akit na pamamaraan, na may natatangi mga istilo at mga hugis . Ang mga sangkap na ito ay tumutulong sa paggawa ng higit pa sa iyong aplikasyon pare-pareho , mabilis , maraming nalalaman at kahit disenyo tumutugon mga website.
Pag-install ng Angular Material
Ngayon, magsimula tayo sa isang mabilis na tutorial sa kung paano mag-install ng Angular Materials. Una muna, siguraduhing mayroon kang naka-install na Angular sa iyong system. Kung hindi ka pamilyar sa Angular, sumangguni sa link sa . Kapag na-set up mo na ang lahat, maaari kang magdagdag ng Angular Materials sa iyong proyekto gamit ang sumusunod na utos:
ng add @angular/material
Una, hihilingin sa iyo na pumili ng isang paunang pangalan ng tema o isang pasadyang tema.
Kailangan mong piliin ang 'Indigo / Pink' prebuilt na tema na kung saan ay ang default na tema upang i-istilo ang iyong application. Maaari mo ring piliin ang tema na 'Pasadyang' upang maaari mong ipasadya ang iyong mga file ng tema na kasama ang lahat ng mga karaniwang istilo.
Susunod, hihilingin sa iyo na mag-set up HammerJS . Ang HammerJS ay isang tanyag na aklatan, pangunahing ginagamit sa Angular application. Nagdaragdag ito ng suporta para sa mga galaw na hipo tulad ng Swipe, Pan, Pinch, Paikutin at marami pa, lalo na sa mga mobile application.
Maaari kang pumili ng alinman sa 'Oo' o 'Hindi'. Ang HammerJS ay maaaring maging kapaki-pakinabang kapag ginamit mo ang iyong aplikasyon sa mga mobile. Habang nag-aalok ang mga mobiles ng mga touch display, ang mga kilos na ito ay mas kapaki-pakinabang at maaaring magmukhang naka-istilong sa iyong mobile application.
Matapos mong piliin ang iyong pinili, sa susunod hihilingin ka nitong mag-set up Mga Animation ng Browser para sa Angular Material.
Kailangan mong pumili ng 'Oo' upang maaari mong gamitin ang mga animasyon sa iyong application. Ginagawa ng mga Angular Animations ang iyong application na mas masaya at mas madaling gamitin. Mapapabuti nito ang iyong app at karanasan ng gumagamit na umaakit ng pansin ng mga gumagamit.
Kasunod, mai-install nito ang Angular Materials sa iyong aplikasyon.
Mga Bahagi ng Materyal na Angular
Tulad ng nabanggit kanina, ang Angular Material Components ay walang anuman UI / UX Mga Bahagi ng Disenyo. Naglalaman ang mga ito ng iba't ibang saklaw ng mga bahagi tulad ng Mga Kontrol sa Form, Navigation, Mga Pindutan at tagapagpahiwatig, Mga Popup at marami pa. Ang mga sangkap na ito ay makakatulong sa iyo na magpatupad ng mga pattern ayon sa pagtutukoy ng Materyal na Disenyo.
Sa pagsulong, tingnan natin ang ilang mga halimbawa kung paano ipatupad ang mga sangkap na ito sa iyong Angular Application.
Nabigasyon
Una, tatalakayin ko ang mga sangkap sa Navigation.
- Toolbar
Kailangan mong i-type ang sumusunod na code sa app.component.html file upang magamit ang sangkap ng Toolbar sa iyong aplikasyon.
Tutorial sa Angular Material ay isang lalagyan mula sa materyal na Angular na ginagamit para sa mga header at pamagat. Ang kulay ng ang lalagyan ay maaaring mabago sa pamamagitan ng paggamit ng kulay pag-aariBilang default, ang mga toolbar ay gumagamit ng isang walang kulay na kulay ng background batay sa kasalukuyang tema ibig sabihin alinman sa ilaw o madilim.Maaari kang pumili ng tatlong mga default na tema na: 'Pangunahin' , 'Accent' , o 'balaan' .Upang magamit ang toolbar na ito, kailangan mo munang i-import ito app.module.ts file mula sa Angular na mga materyales gamit ang sumusunod na utos:
i-import ang {MatToolbarModule} mula sa '@ angular / material'Sa paglaon, kailangan mo ring idagdag ang modyul na ito sa import: [] seksyon na matatagpuan sa app.module.ts file
mga pag-import: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
Para sa Mat-Toolbar, kailangan mong idagdag ang ' MatToolbarModule '.
Ngayon, ihatid natin ang iyong proyekto gamit ang sumusunod na utos:
ng serve -o
Bubuksan nito ang iyong proyekto sa default browser ng iyong system tulad ng ipinakita sa ibaba:
Kung nais mong baguhin ang kulay ng toolbar ayon sa gusto mo, magagawa mo ito sa tulong ng CSS styleheet. Hayaan mo akong magpakita sa iyo ng isang halimbawa.
Una, kailangan mong burahin kulay pag-aari mula sa lalagyan at pagkatapos, i-type ang sumusunod CSS code sa app.component.css file
mat-toolbar {background-color: / * color-of-your-choice * / color: / * text-color * /}Ngayon, ihatid ang iyong proyekto upang makita ang resulta.
- Menu
Susunod, tatalakayin ko ang Menu Component. Kailangan mong i-type ang sumusunod na code sa iyong app.component.html file
Tutorial sa Angular Material Tulong sa Mga Setting ng MenuMagdagdag tayo ng ilang estilo sa Menu pindutan Kailangan mong i-type ang sumusunod na code sa iyong app.component.css file
.space {flex: 1 1 auto} .btns {width: 100px taas: 40px font-size: malaking border-radius: 10px border: 3px solid # 113c89 background-color: lightcoral}klase = 'puwang' ay ginagamit upang magdagdag ng spacing sa pagitan ng 'Toolbar Name' at 'Menu Option'.
Kung sakali, hindi ka pamilyar sa mga style ng CSS, maaari kang mag-refer sa aming blog sa upang makakuha ng malalim.
Tulad ng Toolbar, upang magamit at mga lalagyan, kailangan mong sundin ang parehong pamamaraan tulad ng nasa itaas, upang mag-import MatMenuModule at MatButtonModule mula sa anggular na materyal at idagdag ang mga ito sa import: [] seksyon na matatagpuan sa app.module.ts file
Paglingkuran ang iyong proyekto ngayon upang ipakita ang output.
Mga Kontrol sa Form
Ngayon, tatalakayin ko ang mga bahagi sa Form Control.
- Form Field
Tulad ng ipinahihiwatig ng pangalan, Ginagamit ang Form-Field para sa mga input na ibinigay ng gumagamit. Ito ay karaniwang ginagamit para sa Pagpaparehistro ng isang gumagamit, sa isang application o isang website.
Kailangan mong i-type ang sumusunod na code sa app.component.html file upang magamit ang bahagi ng Form-Field sa iyong aplikasyon.
Mga Kontrol sa Form
Pangalan
Tulad ng dati, kailangan mong mag-import MatFormFieldModule at MatInputModule at idagdag ang mga ito sa import: [] seksyon na matatagpuan sa app.module.ts file Ang code sa itaas ay karaniwang ginagamit upang maglagay ng mga Pangalan tulad ng 'Unang Pangalan', 'Huling Pangalan', atbp. Maaari mo ring gamitin ang Mga Validator at gawing sapilitan ang isang patlang. Halimbawa, maaari mo itong gamitin para sa patlang ng E-mail. Maaari mong itago o ilabas ang teksto para sa Mga Password. Para sa iyong sanggunian, suriin ang code sa ibaba:
Ipasok ang iyong email na {{getErrorMessage ()}} Ipasok ang iyong password {{itago? 'visibility_off': 'kakayahang makita'}}Sa iyong app.component.css file, kailangan mong idagdag ang sumusunod na code:
.example-container {padding-left: 50px}Ngayon, sa iyong app.component.ts file, kailangan mong mag-import FormControl at Mga Validator mula sa @ anggular / form direktoryo
i-import ang {FormControl, Validators} mula sa '@ angular / form'Kailangan mo ring idagdag ang teksto upang maipakita ang isang error sa loob ng sumusunod na klase.
i-export ang klase AppComponent {email = bagong FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {ibalik ito.email.hasError ('kinakailangan')? 'Dapat kang magpasok ng isang halaga': this.email.hasError ('email')? 'Hindi isang wastong email': ''} itago = totoo}Sumangguni sa pamamaraang nasa itaas, kailangan mong i-type ang sumusunod na code sa iyong app.module.ts file upang i-import ang kinakailangang mga module.
i-import ang {FormsModule, ReactiveFormsModule} mula sa '@ angular / form' import {MatIconModule} mula sa '@ angular / material'Sa paglaon, kailangan mong idagdag ang mga modyul na ito sa import: [] seksyon
- Button sa Radyo
Pangkaraniwang ginagamit ang mga Pindutan sa Radyo para sa pagpili ng isang pagpipilian sa mga iba't ibang mga pagpipilian. Maaari mong suriin ang sumusunod na code para sa sanggunian.
Para kay app.component.html file,
Kasarian
Lalaki Babae
Para kay app.component.css file,
mat-radio-button {Padding-left: 50px}Ngayon, kailangan mong mag-import MatRadioModule at idagdag ito sa import: [] seksyon na matatagpuan sa app.module.ts file
Sa paglaon, kailangan mong ihatid ang iyong proyekto upang maipakita ang output.
Sa pagsulong, tatalakayin ko ang Angular Material CDK.
Angular Material CDK
Ang CDK, na kilala rin bilang Component Dev Kit , ay isang silid-aklatan ng paunang natukoy na pag-uugali sa Angular Material, na kung saan ay isang hanay ng mga tool na nagpapatupad ng karaniwan mga pattern ng pakikipag-ugnay at mga tampok ng application . Wala itong anumang pagtutukoy na istilo sa Disenyo ng Materyal. Tingnan natin ang isang halimbawa ng CDK.
- Patlang sa Teksto
Nagbibigay ang sangkap ng Text Field ng mga utility para sa pagtatrabaho sa mga patlang ng pag-input ng teksto. Maaari mong gamitin ang mga bahagi ng CDK sa Text Field upang baguhin ang laki ang mga input. Tingnan natin ang isang halimbawa kung paano ito ipapatupad.
Para kay app.component.html file,
Angular Material CDK
Laki ng font 10px 12px 14px 16px 18px 20px Autosize textarea
Para sa app.component.ts file, kailangan mong i-import muna ang mga sangkap na kinakailangan.
i-import ang {CdkTextareaAutosize} mula sa '@ angular / cdk / text-field' import {NgZone, ViewChild} mula sa '@ angular / core' import {take} mula sa 'rxjs / operator'Ngayon, kailangan mong i-type ang sumusunod na code sa loob ng klase.
istraktura ng data ng diksyunaryo sa java
export class AppComponent {konstruktor (pribadong _ngZone: NgZone) {} @ViewChild ('i-autosize', {static: false}) i-autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}Susunod, kailangan mong mag-import MatSelectModule at idagdag ito sa import: [] seksyon na matatagpuan sa app.module.ts file
Panghuli, kailangan mong ihatid ang iyong proyekto upang maipakita ang output.
Hindi ito ang konklusyon at maraming iba pang mga bahagi sa Angular Materials. Maaari kang mag-refer sa kanila mula sa opisyal na website ng Angular Material.
Sa pamamagitan nito, nais kong wakasan ang aking blog. Inaasahan kong malinaw ka tungkol sa mga pangunahing kaalaman ng Angular Material.Kung mayroon kang anumang mga pagdududa o query tungkol sa artikulong ito, huwag mag-atubiling i-post ang mga ito sa seksyon ng mga komento sa ibaba.
Kung nais mong malaman ang lahat ng iyong natutunan mula sa blog na ito, at higit pa tungkol sa Anggulo , at ihanda ang iyong karera patungo sa isang bihasang Angular Developer, pagkatapos ay isaalang-alang ang pagpapatala para sa aming ' .
May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento ng blog na 'Angular Material' at babalikan ka namin sa lalong madaling panahon.