Dies ist eine Benutzeroberfläche, die am Rand des Bildschirms angezeigt wird, um den Benutzer darüber zu informieren, dass die Aktion des Benutzers (Speichern, Senden usw.) erfolgreich abgeschlossen wurde.

Vorschau

Anwendungsfälle und Funktionen

• System-Feedback: Kommuniziert sofort Erfolgsergebnisse für Benutzeraktionen, z. B. „Gespeichert“ oder „Übermittlung abgeschlossen“.
• Asynchrone Prozessbenachrichtigung: Ideal für Fälle, in denen Sie diskret benachrichtigt werden möchten, ohne die Arbeit des Benutzers zu beeinträchtigen, beispielsweise wenn ein Prozess im Hintergrund abgeschlossen wurde.
• Automatisches Verschwinden: Wird normalerweise nach einer bestimmten Zeitspanne automatisch ausgeblendet, um Platz auf dem Bildschirm freizugeben.

Kernpunkte von Design und UX (Design & UX)

• Dezente Platzierung: Platzieren Sie es in der Ecke des Bildschirms (z. B. unten rechts oder oben rechts), damit es den Hauptinhalt oder die Arbeit nicht beeinträchtigt.
• Visuelle Klarheit: Verwenden Sie grüne („smaragd“ oder „grün“) Symbole und Rahmen, um den Erfolg anzuzeigen und positive Benachrichtigungen intuitiv zu kommunizieren.
• Manuelle Schließfunktion: Bietet eine ×-Schaltfläche (Schließen), damit Benutzer Benachrichtigungen selbst schließen können, was ihnen ein besseres Gefühl der Kontrolle gibt.

So passen Sie es an (Anpassungsanleitung)

• Farbe nach Status: Durch Ersetzen der Tailwind-Klasse können Sie auf verschiedene Bedingungen reagieren, indem Sie die Farbe in Rot („rot“) für Fehlerbenachrichtigungen, Gelb („gelb“) für Warnungen und Blau („blau“) für Informationen ändern.
• Animation hinzufügen: Sie können mithilfe von CSS oder JS eine Animation hinzufügen, die bei der Anzeige von unten eingeblendet wird, oder eine Ausblendanimation, wenn sie verschwindet.

Implementierungscode (Implementierung)

<div class="flex items-center w-full max-w-sm p-4 text-gray-800 bg-white dark:bg-zinc-900 dark:text-gray-200 rounded-lg shadow-lg border border-emerald-100 dark:border-emerald-900/30" role="alert">
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-emerald-500 bg-emerald-100 rounded-lg dark:bg-emerald-800/30 dark:text-emerald-400">
  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
  </svg>
</div>
<div class="ml-3 text-sm font-medium">Successfully saved changes.</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-zinc-900 dark:hover:bg-zinc-800">
  <span class="sr-only">Close</span>
  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>