UI / UX-komponenter i kantet, er kendt som Vinkelmaterialer. Dehjælp Angular Applications med at udføre effektivt . Men hvis du ikke er opmærksom på dem endnu, er der en artikel, der hjælper dig med at lære kantede materialer i detaljer. Også to få indgående kendskab til Angular, overvej at tilmelde dig ' fra Edureka.
I denne artikel vil jeg gennemgå følgende emner:
- Introduktion til kantede materialer
- Vinkelformet installation
- Komponenter med kantede materialer
- Vinkelmateriale CDK
Introduktion til kantede materialer
Materialer blev introduceret som et designsprog, der blev udviklet af Google i 2014. Materielt design er et værktøjtil frontend-rammer, som hjælper dig med visuel , bevægelse og interaktion design. Det hjælper dig også med at tilpasse på tværs af forskellige enheder og forskellige skærmstørrelser. Først blev det tagget til AngularJS for at gøre disse apps mere tiltrækkende og udføre hurtigere . Derefter omskrev Google koden helt fra bunden og fjernede JS dvs. og navngav det i september 2016. Senere taggede Google Material Design til Angular, som bruger og kaldte det Vinkelmaterialer.
Vinkelmaterialer eller User-Interface (UI) komponenter hjælper dig med at designe din applikation i en struktureret måde. De tiltrækker brugere og klarer det lettere at få adgang til de elementer eller komponenter, der findes i din applikation. De hjælper også med at designe dine applikationer på en attraktiv måde med unik stilarter og former . Disse komponenter hjælper med at gøre din applikation mere konsekvent , hurtig , alsidig og endda design lydhør websteder.
Vinkelformet installation
Lad os nu starte med en hurtig vejledning om, hvordan du installerer kantede materialer. Første ting først skal du sørge for at have Angular installeret i dit system. Hvis du ikke er fortrolig med Angular, henvises til linket på . Når du har alt konfigureret, kan du tilføje kantede materialer til dit projekt ved hjælp af følgende kommando:
af add @ vinkel / materiale
Først vil det bede dig om at vælge et forudbygget temanavn eller et brugerdefineret tema.
Du skal vælge det 'Indigo / Pink' forudbyggede tema, som er standardtemaet for at style din applikation. Du kan også vælge temaet 'Brugerdefineret', så du kan tilpasse dine temafiler, der inkluderer alle almindelige stilarter.
Dernæst beder den dig om at konfigurere HammerJS . HammerJS er et populært bibliotek, der hovedsagelig bruges i Angular-applikationer. Det tilføjer understøttelse af berøringsbevægelser som Swipe, Pan, Pinch, Rotate og mange flere, især i mobilapplikationer.
Du kan vælge enten “Ja” eller “Nej”. HammerJS kan være nyttigt, når du bruger din applikation på mobiltelefoner. Da mobiltelefoner tilbyder berøringsskærme, er disse bevægelser mere nyttige og kan se trendy ud i din mobilapplikation.
Når du har valgt dit valg, beder den dig derefter om at konfigurere Browser-animationer til kantet materiale.
Du skal vælge “Ja”, så du kan bruge animationer i din applikation. Vinkel animationer gør din applikation sjovere og nemmere at bruge. Dette kan forbedre din app og brugeroplevelse, som tiltrækker brugernes opmærksomhed.
Derefter installeres dette Angular Materials i din applikation.
Komponenter med kantede materialer
Som nævnt tidligere er kantede materialekomponenter ikke andet end UI / UX Designkomponenter. De indeholder en række forskellige komponenter som formkontroller, navigation, knapper og indikatorer, pop op-vinduer og mange flere. Disse komponenter hjælper dig med at implementere mønstre i henhold til materialedesignspecifikationen.
Lad os se et par eksempler på, hvordan du implementerer disse komponenter i din kantede applikation.
Navigation
Først vil jeg diskutere komponenterne i Navigation.
- Værktøjslinje
Du skal indtaste følgende kode i app.component.html fil for at bruge værktøjslinjekomponenten i din applikation.
Angular Material Tutorial er en beholder af kantet materiale, der bruges til overskrifter og titler. Farven på beholderen kan ændres ved hjælp af farve ejendom.Som standard bruger værktøjslinjer en neutral baggrundsfarve baseret på det aktuelle tema, dvs. enten lys eller mørk.Du kan vælge tre standardtemaer, som er: 'primær' , 'accent' , eller 'advare' .For at bruge denne værktøjslinje skal du først importere den til app.module.ts fil fra kantede materialer ved hjælp af følgende kommando:
importer {MatToolbarModule} fra '@ vinkel / materiale'Senere skal du også tilføje dette modul i import: [] sektion placeret i app.module.ts fil.
importerer: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
For Mat-Toolbar skal du tilføje “ MatToolbarModule ”.
Lad os nu betjene dit projekt ved hjælp af følgende kommando:
af servering -o
Dette åbner dit projekt i standardbrowseren på dit system som vist nedenfor:
Hvis du ønsker at ændre farven på værktøjslinjen efter eget valg, kan du gøre det ved hjælp af CSS-stilark. Lad mig vise dig et eksempel.
Først skal du slette farve ejendom fra beholder, og skriv derefter følgende CSS kode i app.component.css fil.
mat-værktøjslinje {baggrundsfarve: / * farve efter eget valg * / farve: / * tekstfarve * /}Server nu dit projekt for at se resultatet.
- Menu
Dernæst vil jeg diskutere menukomponenten. Du skal indtaste følgende kode i din app.component.html fil.
Angular Material Tutorial Menuindstillinger HjælpLad os tilføje nogle styling på Menu knap. Du skal indtaste følgende kode i din app.component.css fil.
. plads {flex: 1 1 auto} .btns {bredde: 100 pixel højde: 40 pix skriftstørrelse: stor kantradius: 10 pix kant: 3 pix solid # 113c89 baggrundsfarve: lys koral}klasse = ”mellemrum” bruges til at tilføje afstand mellem “Toolbar Name” og “Menu Option”.
Hvis du ikke er bekendt med CSS-stilark, kan du henvise til vores blog på at komme i dybden.
Ligesom Toolbar, at bruge og containere, skal du følge den samme procedure som ovenfor for at importere MatMenuModule og MatButtonModule fra kantet materiale og tilføj dem i import: [] sektion placeret i app.module.ts fil.
Server dit projekt nu for at få vist output.
Formkontrol
Nu vil jeg diskutere komponenterne i Form Control.
- Formularfelt
Som navnet antyder, bruges Form-Field til input givet af brugeren. Det bruges mest til registrering af en bruger, i en applikation eller et websted.
Du skal indtaste følgende kode i app.component.html fil til at bruge Form-Field-komponenten i din applikation.
Formkontrol
Navn
Som normalt skal du importere MatFormFieldModule og MatInputModule og tilføj dem i import: [] sektion placeret i app.module.ts fil. Ovenstående kode bruges normalt til at indtaste navne som “Fornavn”, “Efternavn” osv. Du kan endda bruge Validatorer og gøre et felt obligatorisk. For eksempel kan du bruge det til feltet E-mail. Du kan skjule eller skjule teksten for adgangskoder. Tjek koden nedenfor for din reference:
Indtast din e-mail {{getErrorMessage ()}} Indtast din adgangskode {{skjul? 'visibility_off': 'synlighed'}}I din app.component.css fil, skal du tilføje følgende kode:
.eksempelcontainer {padding-left: 50px}Nu, i din app.component.ts fil, skal du importere FormControl og Validatorer fra @ vinkel / former vejviser.
importer {FormControl, Validators} fra '@ angular / forms'Du skal endda tilføje teksten for at få vist en fejl inden for følgende klasse.
eksportklasse AppComponent {email = ny FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {returner this.email.hasError ('krævet')? 'Du skal indtaste en værdi': this.email.hasError ('email')? 'Ikke en gyldig e-mail': ''} hide = true}Under henvisning til ovenstående procedure skal du indtaste følgende kode i din app.module.ts fil for at importere de nødvendige moduler.
importer {FormsModule, ReactiveFormsModule} fra '@ vinkel / former' import {MatIconModule} fra '@ vinkel / materiale'Senere skal du tilføje disse moduler i import: [] afsnit.
- Radio knap
Radioknapper bruges generelt til at vælge et valg blandt de forskellige muligheder. Du kan tjekke følgende kode til reference.
Til app.component.html fil,
Køn
Mand kvinde
Til app.component.css fil,
mat-radio-knap {Padding-left: 50px}Nu skal du importere MatRadioModule og tilføj det i import: [] sektion placeret i app.module.ts fil.
Senere skal du betjene dit projekt for at få vist output.
Fortsat vil jeg diskutere Angular Material CDK.
Vinkelmateriale CDK
CDK, også kendt som Komponentudviklingssæt , er et bibliotek af foruddefineret adfærd i Angular Material, som er et sæt værktøjer, der implementerer fælles interaktionsmønstre og applikationsfunktioner . Det har ikke nogen styling, der er specifik for Material Design. Lad os se et eksempel på CDK.
- Tekstfelt
Tekstfeltkomponent giver hjælpeprogrammer til at arbejde med tekstinputfelter. Du kan bruge CDK-komponenter i tekstfeltet til at ændre størrelsen på input. Lad os se et eksempel på, hvordan du implementerer det.
Til app.component.html fil,
Vinkelmateriale CDK
Skriftstørrelse 10px 12px 14px 16px 18px 20px Autosize tekstarea
Til app.component.ts fil, skal du først importere de nødvendige komponenter.
importer {CdkTextareaAutosize} fra '@ angular / cdk / text-field' import {NgZone, ViewChild} fra '@ angular / core' import {take} fra 'rxjs / operators'Nu skal du skrive følgende kode inde i klassen.
er kandidatgrad
eksportklasse AppComponent {constructor (privat _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (((() ) = & ampampampgt denne.autosize.resizeToFitContent (sand))}}Dernæst skal du importere MatSelectModule og tilføj det i import: [] sektion placeret i app.module.ts fil.
Endelig skal du betjene dit projekt for at vise output.
Dette er ikke konklusionen, og der er flere andre komponenter i kantede materialer. Du kan henvise til dem fra officiel hjemmeside af kantet materiale.
Med dette vil jeg gerne afslutte min blog. Jeg håber, du er klar over det grundlæggende i Angular Material.Hvis du er i tvivl om eller spørgsmål vedrørende denne artikel, tøv ikke med at sende dem i kommentarfeltet nedenfor.
Hvis du gerne vil lære alt, hvad du lige har lært fra denne blog, og mere om Vinklet , og mål din karriere mod en dygtig vinkeludvikler, og overvej derefter at tilmelde dig vores ' .
Har du et spørgsmål til os? Nævn det i kommentarfeltet på denne 'Angular Material' -blog, og vi vender tilbage til dig hurtigst muligt.