Komponente: Toast-Nachricht (Toast Message)

Die Toast-Komponente ist eine kurze, automatisch ablaufende Benachrichtigung, die dazu dient, Echtzeit-Feedback zu Systemereignissen oder Benutzeraktionen zu geben. Sie ist so konzipiert, dass sie gut sichtbar ist, aber nur eine geringe Unterbrechung darstellt. Sie erscheint über dem Anwendungsinhalt, ohne den aktuellen Arbeitsfluss des Benutzers zu unterbrechen.

Anatomie

Der Toast besteht aus den folgenden Elementen:

• Benutzerdefinierte Nachricht (Custom Message): Eine dynamische Zeichenfolge, die dem Benutzer ein klares, prägnantes Feedback gibt.
• Zeitstempel (Timestamp): Eine Aufzeichnung des genauen Zeitpunkts, an dem das Ereignis ausgelöst wurde, was die chronologische Nachverfolgung erleichtert.
• Schließen-Symbol (Close Icon): Ein benutzerdefiniertes interaktives Element, das es dem Benutzer ermöglicht, die Benachrichtigung manuell zu schließen.

Eigenschaften (CoDeSys)

Bei der Implementierung der Komponente werden die folgenden Eigenschaften verwendet, um deren Inhalt und Verhalten zu definieren:

Beispiel für die Verwendung:

Nutzungsrichtlinien

Konfiguration der Nachricht

Die Toast-Nachricht wird als string bereitgestellt. Um den unaufdringlichen Charakter der Komponente zu bewahren, sollten die Nachrichten kurz gehalten werden. Es wird empfohlen, komplexe Formatierungen innerhalb dieser Zeichenfolge zu vermeiden, um eine maximale Lesbarkeit auf einen Blick zu gewährleisten.

Verhalten & Beständigkeit

• Automatischer Ablauf (Auto-Expiry): Die Komponente folgt einem Lebenszyklus, der durch die Eigenschaft duration definiert ist. Sobald die Zeit abgelaufen ist, wird der Toast automatisch ausgeblendet. Wenn die duration auf 0 gesetzt wird, wird der Toast unbegrenzt angezeigt, bis der Benutzer ihn manuell schließt.
• Manuelles Schließen: Das Schließen-Symbol bietet dem Benutzer die Möglichkeit, die Benachrichtigung sofort zu entfernen, sodass die Benutzeroberfläche unter der Kontrolle des Benutzers bleibt.

CSS-Variablen

Die folgenden CSS-Variablen können neu zugewiesen werden, um das Erscheinungsbild des Toasts anzupassen:

--toast-bg
--toast-accent-color
--toast-border
--toast-height
--toast-width 
--toast-padding 
--toast-font-size 
--toast-font-color
--toast-icon-color 
--toast-icon-size