Share
Denna handledning visar dig hur man bygger ett vackert inloggnings- och registreringsgränssnitt med kantmaterial. Vi tittar på de olika materialkonstruktionskomponenterna och hur de kan användas för professionella applikationer. Den fullständiga koden för denna handledning finns i vårt GitHub repo.
Vi börjar med att skapa en Angular-applikation. Förhoppningsvis har du redan Node.js och Angular CLI installerad i din arbetsmiljö.
Använd följande kommando för att skapa en ny Angular app.
# skapa ett nytt kantprojekt under namnet responsivt-vinkelt material ng nytt registrerings-inloggningsvinkelt material
Detta kommando skapar alla filer som behövs för att starta en Angular-applikation. Nästa steg kommer att vara att lägga till kantmaterial i din ansökan.
cd-reagerande-vinkel-material / #install vinkelmaterial ng add @ vinkel / material
Komponenter i Angular är byggnadsblocken i applikationen. Även om du manuellt kan skapa komponenter, gör Angular CLI det mycket enkelt att automatiskt generera komponenter som innehåller all nödvändig startkod. För att generera en komponent i Angular CLI kör du helt enkelt följande kommando:
# MyComponent är namnet på din komponent ng g komponent MyComponent
Vår app kommer att ha följande komponenter:
Accentsconagua
Registrering komponentLogga in KomponentLåt oss skapa dessa komponenter nu.
#registration komponent ng g komponent RegistrationComponent #login komponent ng g komponent LoginComponent
Skönheten i Angular Material är att den kommer med förkonstruerade teman, så att du enkelt kan starta utseendet på din ansökan genom att enkelt koppla in några enkla kodstyper till din app. För att lägga till ett tema, importera det helt enkelt till style.css.
/*style.css*/ @import "~@angular/material/prebuilt-themes/indigo-pink.css";
Vi vill att vårt användargränssnitt ska ha en navigeringsfält med länkar för registrering och inloggning. Så vi skapar en navigeringsfält med två knappar som länkar till appkomponenterna.
För att skapa en verktygsfält och knappar använder du
Fortsätt och lägg till HTML-koden för användargränssnittet i src / app / app.component.html. Observera att vi också har lagt till länkar till rutterna.
HEM Registrera inloggning
Därefter lägger vi till några stylingar till vårt användargränssnitt. Öppna app.component.css och lägg till följande CSS-stilar.
.spacer flex: 1 1 auto;
Du måste också importera modulerna från @ Vinkel / material. Du kan välja att importera dem från huvudmodulen eller skapa en separat modul som innehåller alla materialdesignmodulerna. Eftersom vi kommer att arbeta med många av dessa moduler när vi skapar resten av användargränssnittet, skapar vi en separat modul för alla komponenter. Gå vidare och skapa en ny fil src / app / material.module.ts.
Lägg till modulerna för , och
importera NgModule från '@ vinkel / kärna'; importera MatButtonModule, MatToolbarModule från '@ vinkel / material'; @NgModule (import: [MatButtonModule, MatToolbarModule], export: [MatButtonModule, MatToolbarModule],) exportklass MyMaterialModule
Sedan, från andra komponenter i vår kod, behöver vi bara inkludera den modul som vi just skapat-app / app.module.ts-enligt nedanstående.
// app / app.module.ts import MyMaterialModule från './material.module'; @NgModule (import: [BrowserModule, BrowserAnimationsModule, MyMaterialModule,],)
Utfärda ng tjäna kommando för att testa din ansökan, och du bör se ett snyggt navigationsområde med Registrera och Logga in länkar.
Routing gör det möjligt för användare att navigera mellan olika sidor. För att aktivera routing i vår applikation definierar vi först routing konfigurationen. För att göra det, lägg till följande kod till app.module.ts.
importera RouterModule, Routes från '@ vinkel / router'; import: [BrowserModule, BrowserAnimationsModule, MyMaterialModule, RouterModule.forRoot ([path: ", omdirigeringTo: '/', pathMatch: 'full', sökväg: 'register', komponent: RegistrationComponentComponent , komponent: LoginComponentComponent,])],
Nästa steg kommer att vara att lägga till en
HEM Registrera inloggning
Vi har placerat routerns utlopp så att komponenterna kommer att synas under navigeringsfältet.
I det här avsnittet kommer vi huvudsakligen att använda layout- och formkontrollkomponenterna. Denna användargränssnitt kommer att visa upp dessa Material Design-komponenter:
Men först, låt oss importera dem i src / app / material.ts.
importera NgModule från '@ vinkel / kärna'; import MatNativeDateModule, MatDatepickerModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatInputModule, MatRadioModule, MatListModule, från '@ vinkel / material'; importera MatDatepickerModule från '@ vinkel / material / datepicker'; importera FormsModule, ReactiveFormsModule från '@ vinkel / former'; @NgModule (import: [MatNativeDateModule, MatDatepickerModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, FormsModule, MatCardModule, MatFormFieldModule, MatInputModule, MatListModule, MatRadioModule,], export: [MatNativeDateModule, FormsModule, MatDatepickerModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatInputModule, MatListModule, MatRadioModule,],) exportklass MyMaterialModule
Vi börjar med
Registrering
Därefter lägger vi till en HTML-blankett i innehållsavsnittet som innehåller alla våra formulärfält.
Registrering
Därefter lägger vi till formulärfält för förnamn, efternamn, adress, e-postadress och lösenord. Vi kommer att använda att skapa inmatningsfälten.
Därefter lägger vi till en kryssruta för kön och en datumväljare för födelsedatum. Vi kommer använda
Manlig Kvinna Andra Födelsedatum
Den sista biten kommer att vara en knapp efter för att skicka användarinformationen.
Låt oss lägga en stil på våra formulär för att göra dem mer presenterbara. Öppna skapa-account.component.css och lägg till följande CSS-stilar.
.My-form min-bredd: 150px; maxbredd: 500px; bredd: 100%; .full bredd bredd: 100%;
Registreringsgränssnittet kommer att se ut så här:
Inloggningsgränssnittet har följande komponenter:
Precis som vi gjorde för registreringsgränssnittet, kommer vi att ha en Material-kortkomponent för att kunna hämta inloggningsformuläret.
HTML-koden för Logga in Sidan visas, som innehåller två ingångar för e-post och lösenordsuppgifter.
LOGGA IN
Den färdiga användargränssnittet kommer att se ut så här:
Denna handledning har täckt de flesta av de vinkelfördelar som behövs för att få ett fullt fungerande användargränssnitt. Som du har sett är kantmaterialet mycket lätt att använda eftersom alla komponenter har fördefinierade stilar. Det innebär att du snabbt kan bygga vackra användargränssnitt. Dessutom ger Angular Material-dokumentationen många exempel och är lätt att följa.
