[Angular] Wysuwany dolny arkusz (bottom sheet)
Z tego wpisu dowiesz się jak w aplikacji Angular zrobić wysuwane od dołu menu, a właściwie dolny arkusz (bottom sheet).
Przed rozpoczęciem pracy zainstaluj w swoim projekcie bibliotekę Angular Material, ponieważ to dzięki niej będzie tworzona ta funkcjonalność: ng add @angular/material
.
Po zainstalowaniu Angular Material możesz zacząć tworzyć komponenty takie jak między innymi bottom sheet. Na potrzeby tego wpisu stworzymy wysuwany od dołu arkusz z listą linków społecznościowych.
Tworzenie komponentu
ng generate component BottomSheet
Edycja app.component.ts
import { Component } from '@angular/core';
import { MatBottomSheet } from '@angular/material/bottom-sheet';
import { BottomSheetComponent } from './bottom-sheet/bottom-sheet.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [MatButtonModule, BottomSheetComponent]
})
export class AppComponent {
constructor(private bottomSheet: MatBottomSheet) {}
openBottomSheet(): void {
this.bottomSheet.open(BottomSheetComponent);
}
}
Plik bottom-sheet.component.ts
import { Component } from '@angular/core';
import { MatBottomSheetRef } from '@angular/material/bottom-sheet';
import {MatListModule} from '@angular/material/list';
import {MatButtonModule} from '@angular/material/button';
@Component({
selector: 'app-bottom-sheet',
templateUrl: './bottom-sheet.component.html',
standalone: true,
imports: [MatListModule, MatButtonModule],
})
export class BottomSheetComponent {
constructor(private bottomSheetRef: MatBottomSheetRef<BottomSheetComponent>) {}
close(): void {
this.bottomSheetRef.dismiss();
}
openLink(event: MouseEvent): void {
event.preventDefault();
this.close();
const target = event.currentTarget as HTMLAnchorElement;
window.open(target.href, '_blank');
}
}
Plik bottom-sheet.component.html
Przykładowa lista z linkami "Udostępnij na":
<mat-nav-list>
<a href="https://www.facebook.com/sharer/sharer.php?u=" mat-list-item (click)="openLink($event)">
<span matListItemTitle>Udostępnij na Facebooku</span>
</a>
<a href="https://x.com/intent/post?url=&text=" mat-list-item (click)="openLink($event)">
<span matListItemTitle>Udostępnij na X</span>
</a>
<a href="http://www.linkedin.com/shareArticle?mini=true&url=&title=" mat-list-item (click)="openLink($event)">
<span matListItemTitle>Udostępnij na LinkedIn</span>
</a>
</mat-nav-list>
Przycisk otwierania bottom sheet
Aby wysunąć arkusz, umieść w app.component.html kod przycisku:
<button mat-raised-button (click)="openBottomSheet()">Udostępnij</button>
Komentarze
Prześlij komentarz
Dzięki za komentarz!