Toast

Ne zaman kullanılır

Toast, kullanıcının az önce yaptığı bir işlemin sonucunu işi bölmeden bildirmek içindir: kaydedildi, kopyalandı, silindi (geri al ile), arka planda biten bir işlem.

Ne zaman kullanılmaz

• Kullanıcının karar vermesi gerekiyorsa: AlertDialog kullanın.
• Bir alanın ya da formun hatası için: Hatayı alanın yanında gösterin.
• Sayfa ya da bölüm boyunca geçerli bir durum için: InlineAlert ya da Banner kullanın.
• Kaybolmaması gereken önemli bilgi için: Bilgiyi sayfada gösterin.

Anatomi

Bildirim göster

AçıkKoyu

Kodu kopyala

import { Button, Toaster, useToast } from '@bigbang/ui';

function ShowButton() {
  const toast = useToast();
  return (
    <Button
      variant="secondary"
      onClick={() => toast.show({ tone: 'success', title: 'Değişiklikler kaydedildi', description: 'Son düzenlemeniz kaydedildi.' })}
    >
      Bildirim göster
    </Button>
  );
}

export default function Default() {
  return (
    <Toaster>
      <ShowButton />
    </Toaster>
  );
}

1. Bölge: Alt köşede, F6 ile ulaşılan “Bildirimler” bölgesi.
2. Ton ikonu: Başarı, bilgi, uyarı, hata ya da döner simge.
3. Başlık ve açıklama.
4. Eylem: İsteğe bağlı, tek buton.
5. Kapat butonu.

Davranış

• Bildirim alttan yükselerek belirir; en fazla üçü üst üste yığılır, eskisi söner.
• Bölgenin üzerine gelince ya da odaklanınca yığın açılır ve süre durur.
• Aşağı ya da kenara doğru kaydırınca kapanır.
• Varsayılan süre 5 saniyedir; daha kısası verilemez. danger kapatılana kadar kalır.
• 640 px’in altında bildirim ekran genişliğini kaplar.

Yönergeler

• Başlığı geçmiş zamanla, kısa yazın: “Değişiklikler kaydedildi”.
• Bir bildirimde en fazla bir eylem kullanın; eylem başka yoldan da yapılabilsin.
• Aynı anda çok bildirim göstermeyin; aynı olayı id ile güncelleyin.
• Hatalarda ne yapılacağını açıklamada söyleyin.

İçerik

Türkçe	İngilizce
Değişiklikler kaydedildi	Changes saved
Öğe silindi	Item deleted
Geri al	Undo
Kaydedilemedi	Could not save

Cam

Provider material="glass" altında bildirimler cama döner. Prop Toaster üzerindedir. material="solid" onu opak tutar.

İlgili bileşenler

• AlertDialog: Karar gerektiren onay için.
• Button: Başarı durumunu butonun kendisinde göstermek için.
• Spinner: Yükleniyor bildirimindeki döner simge.