Geri bildirim · Toast

Geçici bildirim

Bir işlemin sonucunu köşede, kısa süre gösterir. Kaydedildi, gönderildi, silindi.

CSS: kararlı
JavaScript: kapatma ve süre
React: kararlı
Vue: kararlı

Örnekler

Üç tür Canlı örnek

Başvurunuz kaydedildi.

Belge indiriliyor.

Oturumunuz 2 dakika içinde kapanacak.

HTML kodunu göster

<div class="kiris-gecici-alan" role="status" aria-live="polite" data-kiris="gecici">
  <div class="kiris-gecici kiris-gecici--basari"><p class="kiris-gecici__metin">Başvurunuz kaydedildi.</p><button class="kiris-gecici__kapat" type="button" aria-label="Bildirimi kapat"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-close"/></svg></button></div>
  <div class="kiris-gecici"><p class="kiris-gecici__metin">Belge indiriliyor.</p><button class="kiris-gecici__kapat" type="button" aria-label="Bildirimi kapat"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-close"/></svg></button></div>
  <div class="kiris-gecici kiris-gecici--uyari"><p class="kiris-gecici__metin">Oturumunuz 2 dakika içinde kapanacak.</p><button class="kiris-gecici__kapat" type="button" aria-label="Bildirimi kapat"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-close"/></svg></button></div>
</div>

Eylemli (snackbar) Canlı örnek

Belge silindi. Geri al

HTML kodunu göster

<div class="kiris-gecici-alan" role="status" aria-live="polite" data-kiris="gecici">
  <div class="kiris-gecici"><p class="kiris-gecici__metin">Belge silindi. <a class="kiris-link" href="#">Geri al</a></p><button class="kiris-gecici__kapat" type="button" aria-label="Bildirimi kapat"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-close"/></svg></button></div>
</div>

Ne zaman kullanılır

Kullanıcının sayfada kalmasını gerektirmeyen kısa bir sonuç için kullanın.
Hata için kullanmayın. Hata sayfada kalır, uyarı bileşeni ile gösterilir.
En çok bir tane açık durur. Yenisi eskisini kapatır.

Erişilebilirlik

Alan role="status" ve aria-live="polite" taşır. Ekran okuyucu metni okur, odağı almaz.
Kapat düğmesi vardır. Süre 8 saniyeden kısa olmaz. Fare üstündeyken süre durur.
Metin bir eylem içermez. Bir eylem gerekiyorsa bağlantı metnin içinde durur ve süre kapanır.

Karşılanan WCAG 2.2 ölçütleri 2.2.1 4.1.3

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: DK, NO, IE, FI, IT, KR.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-toast ile başlayan sınıflar
Davranış betiği, data-kiris="gecici" başlatıcısı