Share
Vinkel har utvecklats genom åren och nya spännande funktioner har kontinuerligt lagts till i varje version. En av förbättringarna är i Material Design, som kommer med nya komponenter. Denna handledning kommer att se på Angular Material och hur man införlivar det i Angular 6-projekt.
Material Design är ett design språk för webb- och mobilappar som utvecklades av Google 2014. Materialdesign gör det enkelt för utvecklare att anpassa sina användargränssnitt samtidigt som de fortfarande har ett snygg appgränssnitt som användarna är bekväma med. Med Material Design får du ett välorganiserat format tillsammans med flexibiliteten att uttrycka ditt varumärke och stil.
För ett exempel på Materialdesign, kolla in Houzz, ett hemdesignprogram som vann Google Play-utmärkelser år 2016. Den här appen använder sig av Material Design för att passa de många funktionerna i fastighetsmobilens begränsade mobilenhet. Detta ger en bra upplevelse för användaren genom att låta dem se och navigera i applikationen utan att känna sig överväldigad. Det är verkligen en av de bästa materialdesignapparna.
Det här inlägget handlar inte om materialdesign, så vi går inte in i alla detaljer. Om du vill lära dig mer, finns det en bra handledning om Material Design på Envato-bloggen.
Vinkelmaterialet består av en svit av förbyggda vinkelkomponenter. Till skillnad från Bootstrap, som ger dig komponenter som du kan stila som du vill, vänder Angular Material till en förbättrad och konsekvent användarupplevelse. Samtidigt ger det dig möjlighet att styra hur olika komponenter beter sig.
Precis som Angular har Angular Material utvecklats mycket sedan starten, med stora förbättringar och buggfixar.
För att lägga till kantmaterial till ett projekt ska vi använda ng lägga till kommando som används för att lägga till nya möjligheter till Angular-projekt. Detta kommando råkar vara en ny funktion i Angular 6, och det är så enkelt som:
ng add @ vinkel / material
Kommandot lägger till biblioteket i ett befintligt projekt och tar in temat CSS i angular.json. Det kommer också att lägga till skript i index.html och uppdatera AppModule.
En annan egenskap i Angular 6 är ng uppdatering, som uppdaterar npm beroenden när en ny version släpps. Det uppdaterar också din RxJS-kod och Material Design-kod för att dra nytta av nya API.
Vinkelmaterial består av flera designkomponenter som omfattas av följande kategorier:
Du kan generera startkomponenterna med hjälp av ng uppdatering kommando. Några av de scheman som är tillgängliga via detta kommando är:
Dessa scheman kan enkelt installeras med ng generera kommando enligt följande:
Accentsconagua
ng generera @ vinkel / material: material-tabell-namn : genererar en komponent som visar data med en datatabellng generera @ vinkel / material: material-nav -name : genererar en komponent med sidnavigering och en verktygsfältng generera @ vinkel / material: material-instrumentbräda - namn : genererar en komponent som innehåller en dynamisk rutnätlista.
För att komma igång behöver du Angular CLI. Om du inte har Angular CLI installerat, installerar du det genom att utfärda följande kommando.
npm installera -g @ vinkel / cli
Därefter måste vi initiera ett nytt Angular-projekt. För att göra det, utfärda följande kommando, var Material-ng är namnet på vårt Angular-projekt.
ng ny Material-ng
Detta kommando skapar flera Angular Template-filer för ditt projekt och installerar nödvändiga startberoende.
Gå in i katalogen över ditt projekt och lägg till Angular Material i ditt projekt.
cd MaterialApp ng add @ vinkel / material
Därefter lägger vi till några komponenter som är vanliga för många applikationer, som navigering.
Om du vill lägga till en navigeringsfält kan du enkelt utfärda:
ng generera @ vinkel / material: material-nav-name myNav
Det här kommandot lägger till en navigerings- och lådkomponent som kan hopfällas. Du ska få följande produktionen, som har fyra filer som genereras för oss, nämligen my-nav.component.css, my-nav.component.html, my-nav.component.spec.ts, och my-nav.component.ts.
SKAPA src / app / my-nav / my-nav.component.css (129 byte) CREATE src / app / my-nav / my-nav.component.html (CREATE src / app / my-nav / my -nav.component.spec.ts (699 bytes) SKAPA src / app / my-nav / my-nav.component.ts (580 byte) UPDATE src / app / app.module.ts (795 bytes)
Nu öppen my-nav.component.html och du bör se all HTML-koden för den navigering som genererades för oss.
Meny Länk 1 Länk 2 Länk 3 Material-ng
Som standard serverar ett Angular-projekt som startar standardsidan, men vi vill kunna se magiken i Material Design! För att kunna använda vår genererade Material Design nav komponent, öppna app.component.html och ersätt all kod med:
Nu när du kör appen ser du navigeringsfältet.
Du bör också märka att navigeringskomponenten vi lagt till har importerats till huvudmodulen enligt följande:
# app.module.ts import BrowserModule från '@ vinkel / plattform-webbläsare'; importera NgModule från '@ vinkel / kärna'; importera AppComponent från './app.component'; importera BrowserAnimationsModule från '@ vinkel / plattform-webbläsare / animationer'; importera MyNavComponent från './my-nav/my-nav.component'; importera LayoutModule från '@ vinkel / cdk / layout'; importera MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule från '@ vinkel / material'; @NgModule (declarations: [AppComponent, MyNavComponent], import: [BrowserModule, BrowserAnimationsModule, LayoutModule, MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule], leverantörer: [], bootstrap: [AppComponent]) exportklass AppModule
I my-nav.component.html, låt oss göra några ändringar i menyn listor också:
Hem Formkontroller Navigationslayout Knappar och indikatorer Popup & Modals Datatabell
Nu kan du starta utvecklingsservern genom att köra:
ng server -open
Resultatet ska se ut så här:
Som du kan se, är Angular Material ett enkelt sätt att få din applikation igång. Med några få kommandon och några rader kod har vi kunnat ta med Material Design i vår Angular-applikation!
Besök vår GitHub repo för hela källkoden för den här exemplen appen.
Jag hoppas att denna handledning har hjälpt dig att förstå hur du använder kraften i Material Design i din app för ett toppklassigt användargränssnitt. För mer information om Materialdesign i Angular 6, kolla in de officiella dokumenten som innehåller färdiga mallar. Det är ett bra ställe att lära sig om Angular. Du kan också kolla in våra Angular tutorials och kurser här på Envato Tuts+!
