Slik bygger du en brukergrensesnitt med vinkel og materiale

Denne opplæringen vil vise deg hvordan du bygger en vakker påloggings- og registreringsgrensesnitt med kantmateriale. Vi ser på de ulike Materialdesign-komponentene og hvordan de kan brukes til å gi profesjonelle applikasjoner. Den komplette koden for denne opplæringen finner du i vår GitHub repo.

Starter

Vi starter med å skape en kantet applikasjon. Forhåpentligvis har du allerede Node.js og Angular CLI installert i arbeidsmiljøet ditt.

Bruk følgende kommando for å opprette en ny Angular app.

# Lag et nytt kantprosjekt under navnet Response-Angular-Material ng nytt registrerings-login-vinkelt materiale

Denne kommandoen oppretter alle filene som trengs for å starte opp en Angular-applikasjon. Det neste trinnet vil være å legge til vinklet materiale i søknaden din.

cd responsivt-vinklet materiale / #install vinklet materiale ng legg til @ vinkel / materiale

Opprette komponenter ved bruk av kantet CLI

Komponenter i Angular er byggeblokkene i applikasjonen. Selv om du kan lage komponenter manuelt, gjør Angular CLI det veldig enkelt å automatisk generere komponenter som inneholder all nødvendig startkode. For å generere en komponent i Angular CLI, kjører du bare følgende kommando:

# MyComponent er navnet på komponenten ng g-komponenten MyComponent

Vår app vil ha følgende komponenter:

de Registrering komponent
de Logg Inn Komponent

La oss generere disse komponentene nå.

#registration komponent ng g komponent RegistrationComponent #login komponent ng g komponent LoginComponent

Legge til et tema

Skjønnheten i vinkelmateriell er at den kommer med forhåndsbygde temaer, slik at du enkelt kan starte utseendet på applikasjonen din ved bare å plugge inn noen enkle kodebiter til appen din. For å legge til et tema, bare importere det til style.css.

/*style.css*/ @import "~@angular/material/prebuilt-themes/indigo-pink.css";

Bygg brukergrensesnittet

Vi vil at brukergrensesnittet vårt skal ha en navigeringslinje med koblinger for registrering og innlogging. Så vi lager en navigeringslinje med to knapper som kobler til app-komponentene.

For å lage en verktøylinje og knapper bruker du og komponenter henholdsvis.

Gå videre og legg til HTML-koden for brukergrensesnittet i src / app / app.component.html. Legg merke til at vi også har lagt til linker til rutene.

    HJEM  Registrer Logg inn

Deretter vil vi legge til noen styling til brukergrensesnittet vårt. Åpen app.component.css og legg til følgende CSS-stiler.

.spacer flex: 1 1 auto;

Importerer kantmateriale komponenter

Du må også importere modulene fra @ Vinkel / materialet. Du kan velge å importere dem fra hovedmodulen eller opprette en egen modul som inneholder alle Material design modulene. Siden vi skal jobbe med mange av disse modulene når du oppretter resten av brukergrensesnittet, oppretter vi en egen modul for alle komponentene. Gå videre og opprett en ny fil src / app / material.module.ts.

Legg til modulene for , , og komponenter i filen som vist nedenfor.

importer NgModule fra '@ vinkel / kjerne'; importer MatButtonModule, MatToolbarModule fra '@ vinkel / materiale'; @NgModule (import: [MatButtonModule, MatToolbarModule], eksport: [MatButtonModule, MatToolbarModule],) eksport klasse MyMaterialModule

Da, fra andre komponenter i vår kode, trenger vi bare å inkludere modulen vi nettopp har opprettet-app / app.module.ts-som vist under.

// app / app.module.ts import MyMaterialModule fra './material.module'; @NgModule (import: [BrowserModule, BrowserAnimationsModule, MyMaterialModule,],)

Utgitt ng tjene kommandoen for å teste søknaden din, og du bør se et flott navigasjonsområde med Registrere og Logg Inn lenker.

Aktiver ruting

Ruting gjør det mulig for brukere å navigere mellom forskjellige sider. For å aktivere ruting i vår søknad, vil vi først definere rutekonfigurasjonen. For å gjøre det, legg til følgende kode til app.module.ts.

importer RouterModule, Routes fra '@ vinkel / router'; import: [BrowserModule, BrowserAnimationsModule, MyMaterialModule, RouterModule.forRoot ([sti: ", omdirigeringTo: '/', stiMatch: 'full', sti: 'register', komponent: RegistreringComponentComponent , komponent: LoginComponentComponent,]),],

Det neste trinnet vil være å legge til en element som gjør at Angular Router kan vite hvor du skal plassere de rutede komponentene. De app.component.html filen skal nå se slik ut:

    HJEM  Registrer Logg inn

Vi har plassert ruteren utløp så komponentene vil gjengi under navigasjonslinjen.

Registrering brukergrensesnitt

I denne delen vil vi hovedsakelig gjøre bruk av layout og formkontrollelementer. Denne brukergrensesnittet vil presentere disse Material Design komponentene:

kort komponent () -En innholdsbeholder for tekst, bilder og handlinger i sammenheng med et enkelt emne
etikettkomponent () - Brukes til å angi en etikett for skjemafeltet
inngangskomponent () - Angir et inputfelt
formfeltkomponent () -wraps flere kantede komponenter for å lage et skjemafelt
boks komponent () -En innfødt boks med forbedret Material Design styling
date picker komponent () - En forbedret datovelger

Men først, la oss importere dem inn src / app / material.ts.

importer NgModule fra '@ vinkel / kjerne'; importere MatNativeDateModule, MatDatepickerModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatInputModule, MatRadioModule, MatListModule, fra '@ vinkel / materiale'; importer MatDatepickerModule fra '@ vinkel / material / datepicker'; importer FormModule, ReactiveFormsModule fra '@ vinkler / skjemaer'; @NgModule (import: [MatNativeDateModule, MatDatepickerModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, FormsModule, MatCardModule, MatFormFieldModule, MatInputModule, MatListModule, MatRadioModule,], eksport: [MatNativeDateModule, FormsModule, MatDatepickerModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatInputModule, MatListModule, MatRadioModule,],) eksport klasse MyMaterialModule

Vi starter med , som vil inneholde alt innholdet i registreringsgrensesnittet. Åpen registrering-component.component.html og legg til følgende kode.

 Registrering

Deretter legger vi til et HTML-skjema i innholdsdelen som inneholder alle våre skjemafelter.

  Registrering

Deretter legger vi til skjemafelter for fornavn, etternavn, adresse, e-post og passord. Vi skal bruke å lage etiketter og for å lage inntastingsfeltene.

   Fornavn    Etternavn    Adresse    e-post    Passord

Deretter legger vi til en avkrysningsboks for kjønn og en datovelger for fødselsdato. Vi vil bruke og som har forbedret Material Design styling og animasjoner.

  Kjønn:  mann Hunn Annen  
  Fødselsdato

Den siste biten blir en knapp etter for å sende inn brukerinformasjonen.

Form Styling

La oss sette stil på våre skjemaer for å gjøre dem mer presentable. Åpen create-account.component.css og legg til følgende CSS-stiler.

.min-form min-bredde: 150px; maksimal bredde: 500px; bredde: 100%;  .full bredde bredde: 100%;

Registreringsgrensesnittet vil se slik ut:

Bygg brukergrensesnittet for loggkomponenten

Brukergrensesnittet vil ha følgende komponenter:

kort komponent () -En innholdsbeholder for tekst, bilder og handlinger i sammenheng med et enkelt emne
inngangskomponent () - Angir et inputfelt

Akkurat som vi gjorde for registreringsgrensesnittet, vil vi ha en Materiell kortkomponent for å hente innloggingsskjemaet.

HTML-koden for Logg Inn Siden vises, som inneholder to innganger for e-post og passord.

 LOGG INN      e-post    Passord

Den ferdige brukergrensesnittet vil se slik ut:

Konklusjon

Denne opplæringen har dekket de fleste av Angular Material-komponentene som trengs for å lage et fullt fungerende brukergrensesnitt. Som du har sett, er kantmaterialet veldig enkelt å bruke siden alle komponentene har forhåndsdefinerte stiler. Dette betyr at du raskt kan bygge vakre brukergrensesnitt. I tillegg gir Angular Material-dokumentasjonen mange eksempler og er lett å følge.

Kode