Message

Komponente für globale Rückmeldungen zu Aktionsergebnissen, imperativ über die message-API aufgerufen und als schließbarer Toast gerendert.

Nimm sie, wenn du eine kurzlebige, sich selbst schließende Meldung brauchst, die ein Aktionsergebnis bestätigt. Rufe die imperative API message.info / success / warning / error / toast auf, statt Markup zu platzieren.

Schnellstart

Meldung zeigen

<r-button type="primary" onclick="message.info('Das ist ein Hinweis')">Meldung zeigen</r-button>

Message wird normalerweise aus JavaScript aufgerufen. Das globale Objekt message wird an window registriert (auch als window.ranui.message erreichbar), sobald das Komponentenmodul geladen ist.

message.info('Das ist ein Hinweis');
message.success('Projekt gelöscht');

API-Referenz

Globale Methoden

Jede Methode hängt einen Toast an und schließt ihn nach duration Millisekunden von selbst (Standard 3000). Alle fünf haben dieselbe Signatur.

Methode	Beschreibung
`message.info()`	Neutraler Hinweis-Toast (blaues Info-Icon)
`message.success()`	Erfolgs-Toast (grünes Häkchen-Icon)
`message.warning()`	Warnungs-Toast (bernsteinfarbenes Icon), bestimmt angesagt
`message.error()`	Fehler-Toast (rotes Icon), bestimmt angesagt
`message.toast()`	Schlichter dunkler Toast ohne Icon

Signatur der Methoden

Jede Methode nimmt entweder eine string (den Inhalt) oder ein Optionsobjekt.

// 1. Eine Zeichenkette übergeben — nur Inhalt, schließt nach 3000 ms
message.info('Das ist ein Hinweis');

// 2. Ein Optionsobjekt übergeben
message.info({
  content: 'Das ist ein Hinweis',
  duration: 2000,
  close: () => console.log('closed'),
});

Optionen

Option	Typ	Standard	Beschreibung
`content`	`string`	—	Anzuzeigender Text (Pflicht, wenn ein Objekt übergeben wird)
`duration`	`number`	`3000`	Verzögerung in Millisekunden bis zum automatischen Schließen
`close`	`() => void`	—	Callback, das nach dem Entfernen des Toasts läuft
`top`	`number \| string`	`8`	Abstand des Toast-Stapels vom oberen Rand des Containers (Zahl = px)
`zIndex`	`number \| string`	`1200`	Stapelreihenfolge des Toast-Containers
`getContainer`	`() => HTMLElement \| null`	`document.body`	Liefert das Element, in das der Toast-Stapel eingehängt wird

null, undefined oder gar kein Argument bewirken nichts: Es wird nichts angezeigt.

Attribute des Elements `r-message`

Jeder Toast ist ein Custom Element <r-message>. Die globale API setzt diese Attribute für dich, sie lassen sich aber auch direkt verwenden.

Attribut	Typ	Standard	Beschreibung
`type`	`string`	—	Eines von `info`, `success`, `warning`, `error`, `toast`. Wählt Icon/Farbe und die ARIA-Live-Rolle
`content`	`string`	—	Text, der im Toast gerendert wird
`sheet`	`string`	`''`	CSS, das in das Shadow DOM der Komponente injiziert wird

Meldungsarten `type`

Hinweis

Erfolg

Warnung

Fehler

Toast

<r-button onclick="message.info('Das ist ein Hinweis')">Hinweis</r-button>
<r-button onclick="message.success('Das ist ein Hinweis')">Erfolg</r-button>
<r-button onclick="message.warning('Das ist ein Hinweis')">Warnung</r-button>
<r-button onclick="message.error('Das ist ein Hinweis')">Fehler</r-button>
<r-button onclick="message.toast('Das ist ein Hinweis')">Toast</r-button>

Eigene Dauer `duration`

6-Sekunden-Toast

1-Sekunden-Toast

<r-button onclick="message.info({ content: 'Bleibt 6 s', duration: 6000 })">6-Sekunden-Toast</r-button>
<r-button onclick="message.info({ content: 'Bleibt 1 s', duration: 1000 })">1-Sekunden-Toast</r-button>

Callback beim Schließen `close`

Das Callback close läuft, nachdem der Toast aus dem DOM entfernt wurde.

Verkettete Meldung

<r-button onclick="message.success({ content: 'Gespeichert', close: () => message.info('Toast geschlossen') })"
  >Verkettete Meldung</r-button
>

message.success({
  content: 'Gespeichert',
  close: () => {
    // läuft, sobald der Toast verschwunden ist
    console.log('toast closed');
  },
});

Eigene Platzierung `top` / `zIndex` / `getContainer`

Vom oberen Rand versetzen

message.info({
  content: 'Nach unten geschoben',
  top: 120, // Abstand vom oberen Rand des Containers
  zIndex: 1300, // Stapelreihenfolge
  getContainer: () => document.querySelector('#app'), // eigener Einhängepunkt
});

Der Toast-Stapel liegt in einem an den Body portalierten Container; jedes <r-message> rendert seinen Inhalt in ein Shadow DOM, dessen Fläche sich über CSS-Variablen gestalten lässt (alle mit sinnvollen Rückfallwerten).

CSS-Variable	Standard	Beschreibung
`--ran-message-content-background`	`var(--ran-color-bg-elevated)`	Hintergrund der Toast-Fläche
`--ran-message-content-border-radius`	`var(--ran-radius-md)`	Eckenradius des Toasts
`--ran-message-content-box-shadow`	`var(--ran-shadow-menu)`	Erhebung des Toasts
`--ran-message-text-color`	`var(--ran-color-text)`	Textfarbe des Toasts
`--ran-message-z-index`	`var(--ran-z-message, 1200)`	z-index des Stapels
`--ran-message-top`	`8px`	Abstand des Stapels von oben

Bewährte Praxis

Benenne die Änderung: Formuliere den Toast-Text als Ergebnis, etwa „Projekt gelöscht“ oder „Änderungen gespeichert“, nicht als vages „Erfolg“.
Erfolg / Hinweis: Nimm message.success / message.info für Bestätigungen, die nicht blockieren.
Fehler / Warnungen: Nimm message.error / message.warning; sie steigen in eine bestimmte ARIA-Live-Region auf, sodass Screenreader unterbrechen.
Halte es kurz: Ein Toast verschwindet von selbst — hebe lange oder handlungsbedürftige Inhalte für einen Dialog auf.
Dauer sparsam anpassen: Erhöhe duration für längere Meldungen, mache eine kurzlebige Rückmeldung aber nicht dauerhaft.