Zum Hauptinhalt springen

Toaster

Toaster

Mit dem Toaster geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird am Kopf des Browserfenster angezeigt, bis sie geschlossen wird. Werden mehrere Toasts geöffnet, ohne das die bisherigen geschlossen wurden, so werden diese untereinander angezeigt.

Konstruktion​

Ein Toast wird nicht direkt verwendet, sondern immer über den ToasterService konstruiert.

Code​

import { ToasterService } from '@public-ui/components';

// Get the toaster instance for the current HTML document.
const toaster = ToasterService.getInstance(document);

// Enqueue a new toast to the toaster to display:
toaster.enqueue({
 label: 'This is the title',
 description: 'Magna eu sit adipisicing cillum amet esse in aute quis in dolore.',
 type: 'info',
});

Verwendung​

Überschrift​

Verwenden Sie das Attribut _label, um die Überschrift des Toasts zu bestimmen.

Inhalt​

Verwenden Sie das Attribut _description, um den Text-Inhalt des Toasts zu bestimmen.

Anzeigetyp des Toast​

Verwenden Sie das Attribut _type, um den Typ des Toasts festzulegen. Mögliche Werte sind:

  • default
  • error
  • info
  • success
  • warning

Beispiel ansehen