Başarılı Toast Bildirimi

Bu, kullanıcının eyleminin (kaydetme, gönderme vb.) başarıyla tamamlandığını kullanıcıya bildirmek için ekranın kenarında görüntülenen bir kullanıcı arayüzüdür.

Önizleme

Kullanım Durumları ve Özellikler

• Sistem Geri Bildirimi: “Kaydedildi” veya “Gönderim tamamlandı” gibi kullanıcı işlemlerinin başarı sonuçlarını anında iletir.
• Eşzamansız işlem bildirimi: Arka planda bir işlemin tamamlanması gibi, kullanıcının çalışmasına müdahale etmeden gizlice bilgilendirilmek istediğiniz durumlar için idealdir.
• Otomatik kaybolma: Ekranda yer açmak için genellikle belirli bir süre sonra otomatik olarak kaybolur.

Tasarım ve UX’in önemli noktaları (Tasarım ve UX)

• Gizli yerleştirme: Ana içeriği veya çalışmayı etkilememesi için ekranın köşesine (örneğin sağ alt veya sağ üst) yerleştirin.
• Görsel netlik: Olumlu bildirimleri sezgisel olarak iletmek amacıyla başarıyı belirtmek için yeşil (“zümrüt” veya “yeşil”) simgeler ve kenarlıklar kullanın.
• Manuel kapatma işlevi: Kullanıcıların bildirimleri kendilerinin kapatabilmesi için bir × (kapat) düğmesi sağlayarak onlara daha fazla kontrol hissi verir.

Nasıl kişiselleştirilir (Özelleştirme Kılavuzu)

• Duruma göre renk: Tailwind sınıfını değiştirerek, hata bildirimleri için rengi kırmızıya (“kırmızı”), uyarılar için sarıya (“sarı”) ve bilgi için maviye (“mavi”) değiştirerek çeşitli koşullara yanıt verebilirsiniz.
• Animasyon ekleme: CSS veya JS kullanarak, görüntülendiğinde alttan kayan bir animasyon veya kaybolduğunda kaybolan bir animasyon ekleyebilirsiniz.

Uygulama kodu (Uygulama)

<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>