UI / UX-komponenter i kantet, er kjent som Vinkelmaterialer. Dehjelpe Angular Applications til å utføre effektivt . Men hvis du ikke er klar over dem ennå, er det en artikkel som hjelper deg å lære Angular Materials i detalj. Også, tfå grundig kunnskap om Angular, bør du vurdere å melde deg på ' fra Edureka.
I denne artikkelen vil jeg gå gjennom følgende emner:
- Introduksjon til kantete materialer
- Installasjon av kantet materiale
- Komponenter av vinkelmateriale
- Vinkelmateriale CDK
Introduksjon til kantete materialer
Materialer ble introdusert som et designspråk som ble utviklet av Google i 2014. Materiell design er et verktøyfor front-end rammer, som hjelper deg med visuell , bevegelse , og interaksjon design. Det hjelper deg også med å tilpasse deg på tvers av forskjellige enheter og forskjellige skjermstørrelser. Først ble det merket til AngularJS for å gjøre disse appene mer attraktiv og utføre raskere . Deretter skrev Google koden helt fra bunnen av og fjernet JS, dvs. og ga den navnet i september 2016. Senere merket Google Material Design til Angular, som bruker og ga den navnet Angular Materials.
Vinkelmaterialer eller User-Interface (UI) -komponenter hjelper deg med å designe applikasjonen din i en strukturert måte. De tiltrekker seg brukere og klarer det lettere å få tilgang til elementene eller komponentene i applikasjonen din. De hjelper også med å utforme applikasjonene dine på en attraktiv måte, med unike stiler og former . Disse komponentene hjelper deg med å gjøre applikasjonen din mer konsistent , fort , allsidig og til og med design mottakelig nettsteder.
Installasjon av kantet materiale
La oss nå starte med en rask opplæring om hvordan du installerer Angular Materials. Først og fremst må du sørge for at Angular er installert i systemet ditt. Hvis du ikke er kjent med Angular, se lenken på . Når du har konfigurert alt, kan du legge til Angular Materials i prosjektet ditt ved hjelp av følgende kommando:
av add @ vinkel / materiale
Først vil den be deg om å velge et forhåndsbygd temanavn eller et tilpasset tema.
Du må velge det 'Indigo / Pink' forhåndsbygde temaet som er standardtemaet for å style applikasjonen din. Du kan også velge temaet 'Tilpasset' slik at du kan tilpasse temafilene dine som inkluderer alle vanlige stiler.
Deretter vil den be deg om å sette opp HammerJS . HammerJS er et populært bibliotek, hovedsakelig brukt i Angular-applikasjon. Det gir støtte for berøringsbevegelser som sveip, panorering, klemme, rotering og mange flere, spesielt i mobilapplikasjoner.
Du kan velge enten “Ja” eller “Nei”. HammerJS kan være nyttig når du bruker applikasjonen din på mobiltelefoner. Ettersom mobiltelefoner tilbyr berøringsskjermbilder, er disse bevegelsene mer nyttige og kan se trendy ut i mobilappen din.
Når du har valgt ditt valg, vil den be deg om å sette opp Nettleseranimasjoner for kantet materiale.
Du må velge “Ja” slik at du kan bruke animasjoner på applikasjonen din. Angular Animations gjør applikasjonen morsommere og enklere å bruke. Dette kan forbedre appen din og brukeropplevelsen som tiltrekker brukernes oppmerksomhet.
Deretter installeres Angular Materials i applikasjonen din.
Komponenter av vinkelmateriale
Som nevnt tidligere er vinkelmaterialkomponenter ingenting annet enn UI / UX Designkomponenter. De inneholder en rekke komponenter som skjemakontroller, navigering, knapper og indikatorer, popup-vinduer og mange flere. Disse komponentene hjelper deg med å implementere mønstre i henhold til Material Design spesifikasjonen.
La oss se noen eksempler på hvordan du implementerer disse komponentene i Angular Application.
Navigasjon
Først vil jeg diskutere komponentene i Navigasjon.
- Verktøylinje
Du må skrive inn følgende kode i app.component.html filen for å bruke verktøylinjekomponenten i applikasjonen.
Angular Material Tutorial er en beholder av kantet materiale som brukes til overskrifter og titler. Fargen på beholderen kan endres ved å bruke farge eiendom.Som standard bruker verktøylinjer en nøytral bakgrunnsfarge basert på gjeldende tema, dvs. enten lys eller mørk.Du kan velge tre standardtemaer som er: 'hoved' , 'aksent' , eller 'varsle' .For å bruke denne verktøylinjen, må du først importere den til app.module.ts fil fra kantede materialer ved hjelp av følgende kommando:
importer {MatToolbarModule} fra '@ vinkel / materiale'Senere må du også legge til denne modulen i import: [] seksjonen ligger i app.module.ts fil.
importerer: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
For Mat-Toolbar må du legge til “ MatToolbarModule ”.
La oss nå betjene prosjektet ditt med følgende kommando:
av server -o
Dette åpner prosjektet ditt i standardleseren på systemet ditt som vist nedenfor:
Hvis du ønsker å endre fargen på verktøylinjen etter eget valg, kan du gjøre det ved hjelp av CSS-stilark. La meg vise deg et eksempel.
Først må du slette farge eiendom fra beholderen, og skriv deretter inn følgende CSS kode i app.component.css fil.
matte-verktøylinje {bakgrunnsfarge: / * fargevalg etter eget valg * / farge: / * tekstfarge * /}Server nå prosjektet ditt for å se resultatet.
- Meny
Deretter vil jeg diskutere menykomponenten. Du må skrive inn følgende kode i app.component.html fil.
Angular Material Tutorial Menyinnstillinger HjelpLa oss legge til litt styling på Meny knapp. Du må skrive inn følgende kode i app.component.css fil.
. space {flex: 1 1 auto} .btns {width: 100px height: 40px font-size: large border-radius: 10px border: 3px solid # 113c89 background-color: lightcoral}klasse = ”mellomrom” brukes til å legge til avstand mellom 'Navn på verktøylinje' og 'Menyalternativ'.
I tilfelle du ikke er kjent med CSS-stilark, kan du se bloggen vår på å komme i dybden.
Akkurat som Toolbar, for å bruke og containere, må du følge samme fremgangsmåte som ovenfor for å importere MatMenuModule og MatButtonModule fra kantet materiale og legg dem inn import: [] seksjonen ligger i app.module.ts fil.
Server prosjektet ditt nå for å vise utdataene.
Formkontroller
Nå skal jeg diskutere komponentene i Form Control.
- Skjemafelt
Som navnet antyder, brukes Form-Field for innganger gitt av brukeren. Det brukes oftest for registrering av en bruker, i et program eller et nettsted.
Du må skrive inn følgende kode i app.component.html filen for å bruke Form-Field-komponenten i applikasjonen.
Formkontroller
Navn
Som vanlig må du importere MatFormFieldModule og MatInputModule og legg dem inn import: [] seksjonen ligger i app.module.ts fil. Ovennevnte kode brukes vanligvis til å legge inn navn som “Fornavn”, “Etternavn” osv. Du kan til og med bruke validatorer og gjøre et felt obligatorisk. Du kan for eksempel bruke den til e-postfeltet. Du kan skjule eller skjule teksten for passord. For din referanse, sjekk koden nedenfor:
Skriv inn e-postadressen din {{getErrorMessage ()}} Skriv inn passordet ditt {{skjul? 'visibility_off': 'synlighet'}}I din app.component.css , må du legge til følgende kode:
.eksempelcontainer {padding-left: 50px}Nå, i din app.component.ts filen, må du importere den FormControl og Validatorer fra @ vinkel / former katalog.
importer {FormControl, Validators} fra '@ angular / forms'Du må til og med legge til teksten for å vise en feil i følgende klasse.
eksportklasse AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('required')? 'Du må angi en verdi': this.email.hasError ('email')? 'Ikke en gyldig e-postadresse': ''} hide = true}Med henvisning til fremgangsmåten ovenfor må du skrive inn følgende kode i app.module.ts filen for å importere de nødvendige modulene.
importer {FormsModule, ReactiveFormsModule} fra '@ angular / forms' importer {MatIconModule} fra '@ angular / material'Senere må du legge til disse modulene i import: [] seksjon.
- Radioknapp
Radioknapper brukes vanligvis til å velge et valg mellom de forskjellige alternativene. Du kan sjekke ut følgende kode for referanse.
Til app.component.html fil,
Kjønn
Mann Kvinne
Til app.component.css fil,
mat-radio-knapp {Padding-venstre: 50px}Nå må du importere MatRadioModule og legg den til import: [] seksjonen ligger i app.module.ts fil.
Senere må du betjene prosjektet ditt for å vise utdataene.
Fremover vil jeg diskutere Angular Material CDK.
Vinkelmateriale CDK
CDK, også kjent som Komponentutviklingssett , er et bibliotek av forhåndsdefinert atferd i Angular Material, som er et sett med verktøy som implementerer felles samhandlingsmønstre og applikasjonsfunksjoner . Den har ingen styling som er spesifikk for Material Design. La oss se et eksempel på CDK.
- Tekstfelt
Tekstfeltkomponent gir verktøy for å arbeide med tekstinntastingsfelt. Du kan bruke CDK-komponenter i tekstfeltet for å endre størrelse på inngangene. La oss se et eksempel på hvordan du implementerer det.
Til app.component.html fil,
Vinkelmateriale CDK
Skriftstørrelse 10px 12px 14px 16px 18px 20px Autosize textarea
For app.component.ts filen, må du først importere de nødvendige komponentene.
importer {CdkTextareaAutosize} fra '@ angular / cdk / text-field' importer {NgZone, ViewChild} fra '@ angular / core' import {take} fra 'rxjs / operators'Nå må du skrive inn følgende kode i klassen.
php sett inn i $ tabellen
eksportklasse AppComponent {constructor (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (((( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}Deretter må du importere MatSelectModule og legg den til import: [] seksjonen ligger i app.module.ts fil.
Til slutt må du betjene prosjektet ditt for å vise utdataene.
Dette er ikke konklusjonen, og det er flere andre komponenter i Angular Materials. Du kan henvise til dem fra offesiell nettside av kantet materiale.
Med dette vil jeg avslutte bloggen min. Jeg håper du er klar over det grunnleggende i Angular Material.Hvis du er i tvil eller spørsmål angående denne artikkelen, ikke nøl med å legge dem ut i kommentarfeltet nedenfor.
Hvis du vil lære alt du nettopp har lært fra denne bloggen, og mer om Vinklet og mål karrieren din mot en dyktig vinkelutvikler, og vurder deretter å melde deg på ' .
Har du spørsmål til oss? Vennligst nevn det i kommentarfeltet til denne 'Angular Material' -bloggen, så kommer vi tilbake til deg så snart som mulig.