[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

Popular

[C++] Jak obliczyć pole i obwód trapezu?

[HTML] Jak wyśrodkować tekst?

[PHP|HTML] Odświeżenie strony