Alert Warnung
Einführung
Zeigt kurze, wichtige und hochsichtbare Nachrichten an, um Benutzer über Systemereignisse, Erfolgsstatus, Warnungen oder Fehler zu informieren – ohne aktive Workflows zu unterbrechen oder sofortige Layout-Blöcke zu erfordern.
Die Alert-Komponente ist als alert-Block vollständig in den Page Builder integriert und ermöglicht es Content-Editoren und Administratoren, Layouts, Meldungen, Symbolindikatoren und Schweregrade direkt in den Sveltia-CMS-Seitenvorlagen zu konfigurieren.
Nutzung über den CMS-Page-Builder (JSON)
Diese Konfigurationen stellen exakt dar, wie Page-Builder-Block-Elemente innerhalb der Seiten-Schema-Sammlungen (content/pages/*.json) konstruiert werden.
1. Erfolgsmeldung (Subtle-Variante)
Wird verwendet, um Benutzer über positive Ereignisse, Abschlüsse oder erfolgreich verarbeitete Formulare zu informieren (z. B. „Konto erstellt", „Änderungen gespeichert").
{
"type": "alert",
"status": "success",
"variant": "subtle",
"title": "Changes Saved",
"description": "Your profile changes and document uploads have been successfully processed."
}
Changes Saved
2. Dynamischer Warn-Hinweis (Solid-Variante)
Lenkt die Aufmerksamkeit auf potenzielle Probleme oder Aktionen, die Vorsicht erfordern (z. B. „Tarif läuft bald ab", „Systemwartung geplant").
{
"type": "alert",
"status": "warning",
"variant": "solid",
"title": "Approaching Storage Limit",
"description": "Your workspace has used 85% of allocated file capacity. Upgrade plan to avoid system freezes."
}
Approaching Storage Limit
3. Fehler / Ausfall mit hoher Priorität (Outline-Variante)
Informiert den Benutzer über kritische Fehler, abgelaufene Anmeldedaten oder Transaktionsfehler, die den Fortschritt blockieren.
{
"type": "alert",
"status": "error",
"variant": "outline",
"title": "Connection Terminated",
"description": "The analytics engine timed out while pulling data. Check database credentials and try again."
}
Connection Terminated
CMS-Konfigurationsreferenz
Diese Eigenschaften lassen sich direkt auf Sveltia-CMS-Widget-Felder unter public/admin/config.yml abbilden:
| Eigenschaft | CMS-Feldtyp | Standard | Beschreibung / Unterstützte Optionen |
|---|---|---|---|
Titel (title) | string | - | Fettgedruckter Kopfftext, der in der obersten Zeile des Alert-Blocks angezeigt wird. |
Beschreibung (description) | string | - | Detaillierte Nachricht mit ergänzendem Kontext oder Handlungsanweisungen. |
Schweregrad-Status (status) | select | "info" | Legt die semantische Layoutfarbe und das Standard-Symbol fest. • Optionen: "success", "warning", "error", "info", "neutral". |
Visuelle Variante (variant) | select | "subtle" | Steuert Layoutränder und Hintergrund-Dichte des Containers. • "subtle" — Helle, halbtransparente Hintergrundfarbe (am besten für generische Inhalte). • "solid" — Dichte, undurchsichtige, hochsatte Hintergrundfarbe. • "outline" — Transparenter Hintergrund mit dünnem, farbgleichem Rahmen. |
Aria-Live-Einstellung (aria-live) | select | "polite" | Prioritätsmodus der Ansage für Screenreader. • "polite" — Meldet die Nachricht, sobald der Benutzer inaktiv wird. • "assertive" — Unterbricht die Screenreader-Aktivität sofort (bei Fehlern sparsam einsetzen). |
Entwickler-Hinweise & Barrierefreiheit
- Server-seitig gerenderte Symbole: Um Hydration-Mismatch-Warnungen zu vermeiden und die Asset-Auslieferung zu optimieren, wird das semantische
AlertIconje nach gewähltemstatus-Prop dynamisch in ein inline, hochoptimiertes SVG kompiliert. - WAI-ARIA-Barrierefreiheit: Alerts erhalten beim Mounten automatisch das Attribut
role="alert", um assistive Technologien zu benachrichtigen. Der Standardparameteraria-liveist auf"polite"gesetzt, damit Benutzeraufgaben nicht abrupt unterbrochen werden. - Layout-Fluss-Integration: Als Block-Level-Container-Layout konzipiert. Wird es in flexible Grid-Verzeichnisse verschachtelt, dehnt sich der Alert-Container automatisch horizontal aus und fügt sich nahtlos an bestehende Spaltengrenzen an.