Responsiv Side Navigation i Angular Material

Skab en Dynamisk Side Navigation med Angular Material

I den moderne webudvikling er en brugervenlig og responsiv navigation afgørende for en god brugeroplevelse. Side navigation menuer, også kendt som sidebars, er et udbredt mønster, der giver adgang til forskellige sektioner af en applikation. Mange standardkomponenter mangler dog den nødvendige fleksibilitet til at tilpasse sig forskellige skærmstørrelser. Denne artikel vil guide dig trin for trin gennem processen med at bygge en fuldt responsiv sidebar i Angular ved hjælp af det populære Angular Material bibliotek.

Hvad betyder en responsiv sidebar? På større skærme, som desktops, har vi rigelig plads. Her ønsker vi, at sidebaren skal være synlig permanent, så brugeren altid har overblikket over applikationens sektioner. På mindre skærme, såsom smartphones og tablets, ønsker vi derimod at skjule sidebaren som standard og kun vise den, når brugeren aktivt ønsker at navigere. Dette sikrer optimal udnyttelse af den begrænsede skærmplads.

Opsætning af Projektet

For at komme i gang skal du først oprette et nyt Angular-projekt og tilføje Angular Material-komponentbiblioteket. Dette gøres nemt via Angular CLI:

ng new angular-responsive-sidebar ng add @angular/material 

Når projektet er oprettet, og Material er tilføjet, skal vi importere de nødvendige moduler i din app.module.ts fil:

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule, MatSidenavModule, MatButtonModule, MatIconModule, MatDividerModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

Med disse moduler importeret er vi klar til at begynde at tilføje vores komponenter til skabelonen.

Tilføjelse af Toolbar og Sidebar Komponenter

Lad os nu integrere Material Toolbar og Material Side Navigation Bar i vores hovedfil, app.component.html:

<mat-toolbar> Responsiv side navigation </mat-toolbar> <mat-sidenav-container> <mat-sidenav> <!-- Menu elementer kommer her --> </mat-sidenav> <mat-sidenav-content> <div class="content mat-elevation-z8"> Hovedindholdet kommer her! </div> </mat-sidenav-content> </mat-sidenav-container> 

Som det ses, består Material Side Navigation-komponenten af flere dele. mat-sidenav-container omslutter både mat-sidenav (selve sidebaren) og mat-sidenav-content (hovedindholdet). I mat-sidenav-content kan du placere alt dit applikationsindhold, inklusive en router-outlet, hvis du bruger routing til at vise forskellige sektioner af din applikation.

Styling for et Professionelt Look

For at give vores layout et mere poleret udseende, anvender vi følgende CSS i app.component.scss:

mat-toolbar { background: #004a9f; color: white; } mat-sidenav { margin: 16px; width: 200px; border-right: none; background: #002b5c; color: white; border-radius: 10px; padding: 16px; text-align: center; } .content { height: calc(100vh - 98px); border-radius: 10px; margin: 16px; margin-left: 32px; display: flex; justify-content: center; align-items: center; font-size: 2rem; color: lightgray; } mat-sidenav-container { height: calc(100vh - 65px); } 

Her har vi defineret baggrunds- og forgrundsfarver, tilføjet marginer for at skabe afstand mellem elementerne og sat faste højder for at sikre, at sektionerne fylder hele siden. Vi har også tilføjet afrundede hjørner og skyggeeffekt med klassen mat-elevation-z8, som er en del af Angular Material.

Tilføjelse af Menu-elementer og Brugerprofil

Lad os nu gøre sidebaren mere funktionel ved at tilføje menu-elementer og en brugerprofilsektion. Dette er ikke strengt nødvendigt for sidens funktionalitet, men bidrager til et mere komplet eksempel.

<mat-sidenav #sidenav class="mat-elevation-z8"> <img class="avatar mat-elevation-z8" src="https://source.unsplash.com/c_GmwfHBDzk/200x200" /> <h4 class="name">John Smith</h4> <p class="designation">Software Engineer</p> <mat-divider></mat-divider> <button mat-button class="menu-button"> <mat-icon>home</mat-icon> <span>Home</span> </button> <button mat-button class="menu-button"> <mat-icon>person</mat-icon> <span>Profile</span> </button> <button mat-button class="menu-button"> <mat-icon>info</mat-icon> <span>About</span> </button> <mat-divider></mat-divider> <button mat-button class="menu-button"> <mat-icon>help</mat-icon> <span>Help</span> </button> </mat-sidenav> 

Tilføj følgende CSS for at style disse elementer:

.menu-button { width: 100%; display: flex; align-items: center; justify-content: flex-start; font-size: 1rem; mat-icon { margin-right: 8px; } } .avatar { margin-top: 16px; width: 100px; height: 100px; border-radius: 50%; } .name { margin-top: 8px; font-weight: normal; } .designation { margin-top: 2px; font-size: 0.7rem; color: lightgrey; } mat-divider { margin-top: 16px; margin-bottom: 16px; background-color: rgba(255, 255, 255, 0.5); } 

Disse styles giver et mere autentisk udseende, og i en rigtig applikation ville knapperne typisk have routerLink direktiver for at navigere mellem sider.

Gør Sidebaren Responsiv

Nøglen til at gøre sidebaren responsiv ligger i mode-egenskaben på mat-sidenav-komponenten. For store skærme sætter vi mode til "side", hvilket holder sidebaren synlig. For små skærme bruger vi mode"over", som skjuler sidebaren og lader den overlappe indholdet, når den aktiveres.

Vi kan detektere skærmstørrelsesændringer ved hjælp af Angular CDK's BreakpointObserver service. Lad os implementere dette i vores app.component.ts:

import { Component, ViewChild } from '@angular/core'; import { BreakpointObserver } from '@angular/cdk/layout'; import { MatSidenav } from '@angular/material/sidenav'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { @ViewChild(MatSidenav) sidenav!: MatSidenav; constructor(private observer: BreakpointObserver) {} ngAfterViewInit() { this.observer.observe(["(max-width: 800px)"]).subscribe((res) => { if (res.matches) { this.sidenav.mode = "over"; this.sidenav.close(); } else { this.sidenav.mode = "side"; this.sidenav.open(); } }); } } 

Her bruger vi @ViewChild til at få en reference til MatSidenav-komponenten og BreakpointObserver til at overvåge skærmstørrelser. Når skærmbredden falder til under 800px, skifter vi til "over" mode og lukker sidebaren. Ellers, når skærmen er bredere, sætter vi den til "side" mode og åbner den.

Tilføjelse af Toggle-knap til Små Skærme

Selvom sidebaren skjules på små skærme, mangler vi en måde at åbne og lukke den på. Vi tilføjer en toggle-knap til toolbar'en:

<mat-toolbar class="mat-elevation-z8"> <button mat-icon-button *ngIf="sidenav.mode === 'over'" (click)="sidenav.toggle()"> <mat-icon *ngIf="!sidenav.opened">menu</mat-icon> <mat-icon *ngIf="sidenav.opened">close</mat-icon> </button> Responsiv side navigation </mat-toolbar> <mat-sidenav #sidenav="matSidenav" class="mat-elevation-z8"> <!-- ... menu indhold ... --> </mat-sidenav> 

Vi bruger en template-variabel #sidenav="matSidenav" for at gøre MatSidenav-referencen tilgængelig i HTML. Knappen vises kun i "over" mode (små skærme) og bruger sidenav.toggle() til at åbne/lukke sidebaren. Ikonet ændres afhængigt af, om sidebaren er åben eller lukket.

Tabeloversigt over Tilstande

Ofte Stillede Spørgsmål (FAQ)

Hvad er Angular Material?
Angular Material er et UI-komponentbibliotek, der implementerer Googles Material Design-specifikationer for Angular.

Hvordan fungerer BreakpointObserver?
BreakpointObserver fra Angular CDK giver dig mulighed for at reagere på ændringer i skærmstørrelser baseret på definerede medieforespørgsler.

Kan jeg ændre breakpoint-værdien?
Ja, du kan ændre "(max-width: 800px)" til enhver anden gyldig medieforespørgsel for at tilpasse breakpointet efter dine behov.

Konklusion

Med den stigende brug af mobile enheder er responsive layouts ikke længere en luksus, men en nødvendighed. Denne artikel har vist, hvordan du effektivt kan implementere en responsiv sidebar i din Angular-applikation ved hjælp af Angular Material og CDK's BreakpointObserver. Ved at kombinere disse værktøjer kan du skabe en intuitiv og moderne brugergrænseflade, der fungerer problemfrit på tværs af alle enheder.

Dette princip kan udvides til andre komponenter for at opnå et fuldt responsivt design. Husk at tjekke de medfølgende kildekoder for en komplet implementering.

Hvis du vil læse andre artikler, der ligner Responsiv Side Navigation i Angular Material, kan du besøge kategorien Teknologi.