Wir von KoliBri werden die Toaster Komponente und Service mit Version 5 entfernen, da sie mit den bestehenden Barrierefreiheitsvorgaben nicht verienbar ist. Statt noch mehr Ressourcen in ein wahrscheinlich nie barrierefreies Konzept zu investieren, möchten wir die Energie in die Entwicklung und Dokumentation robuster, barrierefreier Alternativen lenken.
Siehe dazu auch die Diskussion in unserem Github #8372.
In den kommenden Wochen werden wir unsere Beispiele und Dokumentation auf empfehlenswerte Alternativen umstellen, z. B. Inline-Feedback, ARIA-konforme Statusmeldungen, Dialoge für kritische Informationen.

Toaster [deprecated]

Synonyme: Notification, Snackbar

Mit dem Toast-Service 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

Die Toast-Komponenten werden 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, {
 defaultVariant: 'msg', // Standard: 'card'
});

// 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',
 variant: 'msg', // Standard: 'card'
});

Weitere Service-Methoden

• closeAll: Schließt alle Toasts
• dispose: Entfernt den Toast Container. Die Toaster-Instanz kann nicht weiter genutzt werden.

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.

Alternativ zur statischen Description können Sie über das Attribut _render eine eigene Render-Funktion definieren. Diese wird mit einer Referenz zum HTMLElement der Toast-Komponente aufgerufen. Zudem wird auch ein Objekt übergeben, das eine close-Funktion zum Schließen des Toasts bereitstellt.

const closeToast = toaster.enqueue({
 render: (element: HTMLElement, { close }) => {
  element.textContent = 'Mein Inhalt';
  const customCloseButton = document.createElement('button');
  customCloseButton.textContent = 'Toast schließen';
  element.appendChild(customCloseButton);
  customCloseButton.addEventListener('click', close, { once: true });
 },
});

/* Optional: Toast wieder schließen mit `closeToast()` */

Anzeige-Option des Toast

In KoliBri unterscheiden wir drei Ebenen:

• _type → definiert die semantische Bedeutung oder logische Funktion einer Komponente.
  Beispiel: Bei kol-button: "button" | "submit" | "reset", bei kol-alert: "info" | "success" | "warning" | "error".

• _variant → steuert das visuelle Erscheinungsbild, z. B. "primary", "secondary", "ghost".

• _behavior → bestimmt das Interaktionsverhalten der Komponente.
  Beispiel: Bei kol-tabs: "select-automatic" vs. "select-manual".

👉 Kurz gesagt:

• _type = Bedeutung & Logik
• _variant = Look & Styling
• _behavior = Interaktion & Verhalten

[DEPRECATED] Will be removed in the next major version. For more information, please refer to: https://github.com/public-ui/kolibri/issues/8372

Methods

closeAll

closeAll(immediate?: boolean) => Promise<void>

Closes all toasts.

Parameters

Name	Type	Description
immediate	boolean

Returns

Type: Promise<void>

enqueue(toast: Toast) => Promise<() => void>

Adds a toast to the queue.

Parameters

Name	Type	Description
toast	{ description?: string | undefined; render?: ToastRenderFunction | undefined; label: string; type: "default" | "info" | "success" | "warning" | "error"; variant?: "card" | undefined; onClose?: (() => void) | undefined; }

Returns

Type: Promise<() => void>

---

Beispiel ansehen