UI / UX-komponenter i vinkel, är kända som Vinkelmaterial. Dehjälp Angular Applications att utföra effektivt . Men om du inte känner till dem ännu, här är en artikel som hjälper dig att lära dig vinkelmaterial i detalj. Också to få fördjupade kunskaper om Angular, överväga att anmäla dig till ' från Edureka.
I den här artikeln kommer jag att gå igenom följande ämnen:
- Introduktion till vinkelmaterial
- Vinkelmaterialinstallation
- Komponenter för vinkelmaterial
- Vinkelmaterial CDK
Introduktion till vinkelmaterial
Material introducerades som ett designspråk som utvecklades av Google 2014. Materialdesign är ett verktygför front-end ramar, vilket hjälper dig med visuell , rörelse och samspel design. Det hjälper dig också att anpassa dig till olika enheter och olika skärmstorlekar. Först märktes det till AngularJS för att göra dessa appar mer attraktiv och utföra snabbare . Sedan skrev Google om koden helt från början och tog bort JS, dvs. och namngav det i september 2016. Senare taggade Google Material Design till Angular, som använder och döpte det till vinkelmaterial.
Vinkelmaterial eller User-Interface (UI) -komponenter hjälper dig att utforma din applikation i en strukturerad sätt. De lockar användare och gör det lättare att komma åt elementen eller komponenterna som finns i din applikation. De hjälper också till att utforma dina applikationer på ett attraktivt sätt, med unika stilar och former . Dessa komponenter hjälper till att göra din applikation mer konsekvent , snabb , mångsidig och till och med design mottaglig webbplatser.
Vinkelmaterialinstallation
Låt oss börja med en snabb handledning om hur du installerar vinkelmaterial. Första saker först, se till att du har Angular installerat i ditt system. Om du inte känner till Angular, se länken på . När du har konfigurerat allt kan du lägga till vinkelmaterial i ditt projekt med följande kommando:
av add @ vinkel / material
Först kommer det att be dig att välja ett förbyggt temanamn eller ett anpassat tema.
Du måste välja det förbyggda temat 'Indigo / Pink' som är standardtemat för att utforma din applikation. Du kan också välja temat 'Anpassat' så att du kan anpassa dina temafiler som innehåller alla vanliga stilar.
Därefter kommer den att be dig att ställa in HammerJS . HammerJS är ett populärt bibliotek, som huvudsakligen används i Angular-applikationer. Det ger stöd för pekgester som Swipe, Pan, Pinch, Rotate och många fler, särskilt i mobilapplikationer.
Du kan välja antingen “Ja” eller “Nej”. HammerJS kan vara användbart när du använder din applikation på mobiler. Eftersom mobiler erbjuder pekskärmar är dessa gester mer användbara och kan se trendiga ut i din mobilapplikation.
När du har valt ditt val kommer den att be dig ställa in Webbläsaranimationer för vinkelmaterial.
Du måste välja 'Ja' så att du kan använda animationer i din applikation. Angular Animations gör din applikation roligare och enklare att använda. Detta kan förbättra din app och användarupplevelse som lockar användarnas uppmärksamhet.
Därefter kommer Angular Materials att installeras i din applikation.
Komponenter för vinkelmaterial
Som nämnts tidigare är vinkelmaterialkomponenter ingenting annat än UI / UX Designkomponenter. De innehåller en rad olika komponenter som formulärkontroller, navigering, knappar och indikatorer, popup-fönster och många fler. Dessa komponenter hjälper dig att implementera mönster enligt materialdesignspecifikationen.
Låt oss se några exempel på hur du implementerar dessa komponenter i din Angular Application.
Navigering
Först kommer jag att diskutera komponenterna i Navigation.
- Verktygsfält
Du måste skriva följande kod i app.component.html fil för att använda verktygsfältkomponenten i din applikation.
Angular Material Tutorial är en behållare av vinkelmaterial som används för rubriker och titlar. Färgen på behållaren kan ändras med hjälp av Färg fast egendom.Som standard använder verktygsfält en neutral bakgrundsfärg baserat på det aktuella temat, dvs antingen ljus eller mörk.Du kan välja tre standardteman: 'primär' , 'accent' , eller 'varna' .För att kunna använda det här verktygsfältet måste du först importera det till app.module.ts fil från vinkelmaterial med följande kommando:
importera {MatToolbarModule} från '@ vinkel / material'Senare måste du också lägga till den här modulen i import: [] sektionen ligger i app.module.ts fil.
importerar: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
För Mat-Toolbar måste du lägga till “ MatToolbarModule ”.
Låt oss nu betjäna ditt projekt med följande kommando:
av servera -o
Detta öppnar ditt projekt i standardwebbläsaren i ditt system enligt nedan:
Om du vill ändra färgen på verktygsfältet enligt ditt val kan du göra det med hjälp av CSS-formatmall. Låt mig visa dig ett exempel.
Först måste du radera Färg fastighet från behållare och skriv sedan följande CSS kod i app.component.css fil.
mat-verktygsfält {bakgrundsfärg: / * färg efter eget val * / färg: / * textfärg * /}Servera nu ditt projekt för att se resultatet.
- Meny
Därefter kommer jag att diskutera menykomponenten. Du måste skriva följande kod i din app.component.html fil.
Angular Material Tutorial Menyinställningar HjälpLåt oss lägga till lite styling på Meny knapp. Du måste skriva följande kod i din app.component.css fil.
.space {flex: 1 1 auto} .btns {bredd: 100px höjd: 40px teckenstorlek: stor ramradie: 10px kant: 3px fast # 113c89 bakgrundsfärg: ljuskorall}class = ”space” används för att lägga till avstånd mellan “Namn på verktygsfält” och “Menyalternativ”.
Om du inte känner till CSS-formatmall kan du hänvisa till vår blogg på att fördjupa sig.
Precis som Toolbar, att använda och behållare måste du följa samma procedur som ovan för att importera MatMenuModule och MatButtonModule från vinkelmaterial och lägg till dem import: [] sektionen ligger i app.module.ts fil.
Servera ditt projekt nu för att visa utdata.
Formkontroller
Nu kommer jag att diskutera komponenterna i Form Control.
- Formfält
Som namnet antyder används Form-Field för ingångar som ges av användaren. Det används oftast för registrering av en användare, i en applikation eller en webbplats.
Du måste skriva följande kod i app.component.html fil för att använda komponenten Form-Field i din applikation.
Formkontroller
namn
Som vanligt måste du importera MatFormFieldModule och MatInputModule och lägg till dem import: [] sektionen ligger i app.module.ts fil. Ovanstående kod används vanligtvis för att mata in namn som 'Förnamn', 'Efternamn', etc. Du kan till och med använda validerare och göra ett fält obligatoriskt. Du kan till exempel använda den för fältet E-post. Du kan dölja eller ta bort texten för lösenord. För din referens, kolla in koden nedan:
Ange din e-postadress {{getErrorMessage ()}} Ange ditt lösenord {{dölj? 'visibility_off': 'synlighet'}}I din app.component.css fil måste du lägga till följande kod:
.exempelbehållare {padding-left: 50px}Nu, i din app.component.ts fil måste du importera FormControl och Validerare från @ vinkel / former katalog.
importera {FormControl, Validators} från '@ vinkel / formulär'Du måste till och med lägga till texten för att visa ett fel i följande klass.
exportklass AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('required')? 'Du måste ange ett värde': this.email.hasError ('email')? 'Inte ett giltigt e-postmeddelande': ''} hide = true}Med hänvisning till ovanstående procedur måste du skriva följande kod i din app.module.ts filen för att importera nödvändiga moduler.
importera {FormsModule, ReactiveFormsModule} från '@ vinkel / formulär' importera {MatIconModule} från '@ vinkel / material'Senare måste du lägga till dessa moduler i import: [] sektion.
- Radio knapp
Radioknappar används vanligtvis för att välja ett val mellan de olika alternativen. Du kan kolla in följande kod för referens.
För app.component.html fil,
Kön
Man kvinna
För app.component.css fil,
mat-radio-knapp {Padding-left: 50px}Nu måste du importera MatRadioModule och lägg till den import: [] sektionen ligger i app.module.ts fil.
Senare måste du betjäna ditt projekt för att visa utdata.
Framåt kommer jag att diskutera Angular Material CDK.
Vinkelmaterial CDK
CDK, även känd som Komponentutvecklingssats , är ett bibliotek av fördefinierade beteenden i Angular Material, som är en uppsättning verktyg som implementerar vanligt interaktionsmönster och applikationsfunktioner . Den har ingen styling som är specifik för Materialdesign. Låt oss se ett exempel på CDK.
- Textfält
Text Field-komponenten tillhandahåller verktyg för att arbeta med textinmatningsfält. Du kan använda CDK-komponenter i textfältet för att ändra storlek på ingångarna. Låt oss se ett exempel på hur du implementerar det.
För app.component.html fil,
Vinkelmaterial CDK
Teckenstorlek 10px 12px 14px 16px 18px 20px Autosize textarea
För app.component.ts måste du först importera nödvändiga komponenter.
importera {CdkTextareaAutosize} från '@ angular / cdk / text-field' importera {NgZone, ViewChild} från '@ angular / core' import {take} från 'rxjs / operators'Nu måste du skriva följande kod i klassen.
datablandning i tablå 10
exportklass AppComponent {constructor (privat _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (((() ) = & ampampampgt this.autosize.resizeToFitContent (true))}}Därefter måste du importera MatSelectModule och lägg till den import: [] sektionen ligger i app.module.ts fil.
Slutligen måste du betjäna ditt projekt för att visa utdata.
Detta är inte slutsatsen och det finns flera andra komponenter i vinkelmaterial. Du kan hänvisa till dem från officiell hemsida av vinkelmaterial.
Med detta vill jag avsluta min blogg. Jag hoppas att du är tydlig med det grundläggande i Angular Material.Om du har några tvivel eller frågor angående den här artikeln, tveka inte att posta dem i kommentarfältet nedan.
Om du vill lära dig allt du just lärde dig från den här bloggen och mer om Vinkel , och rikta din karriär mot en skicklig vinkelutvecklare, överväg sedan att anmäla dig till vår ' .
Har du en fråga till oss? Vänligen nämna det i kommentarsektionen på denna 'Angular Material' -blogg så återkommer vi till dig så snart som möjligt.