Bileşenler

Toast

Bir işlemin sonucunu sayfanın köşesinde kısa süre gösteren, yığılan ve kaydırılarak kapatılan bildirim.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Uygulamayı bir kez Toaster ile sarın ve bildirimleri useToast ile gösterin. Bildirim alt köşede belirir, beş saniye sonra kapanır; üzerine gelince ya da odaklanınca süre durur.

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>
  );
}

Tonlar

tone ikonu ve rengi belirler. danger hemen okunur ve kapatılana kadar kalır.

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

const toasts: (ToastOptions & { button: string })[] = [
  { button: 'Nötr', tone: 'neutral', title: 'Bağlantı kopyalandı' },
  { button: 'Başarı', tone: 'success', title: 'Değişiklikler kaydedildi', description: 'Son düzenlemeniz kaydedildi.' },
  { button: 'Bilgi', tone: 'info', title: 'Yeni sürüm hazır', description: 'Sayfayı yenilediğinizde açılır.' },
  { button: 'Uyarı', tone: 'warning', title: 'Bağlantı yavaş', description: 'Değişiklikler gecikmeli kaydedilebilir.' },
  { button: 'Hata', tone: 'danger', title: 'Kaydedilemedi', description: 'Bağlantınızı kontrol edip yeniden deneyin.' },
];

function ToneButtons() {
  const toast = useToast();
  return (
    <div className="flex flex-wrap gap-sm">
      {toasts.map(({ button, ...options }) => (
        <Button key={button} variant="secondary" onClick={() => toast.show(options)}>
          {button}
        </Button>
      ))}
    </div>
  );
}

export default function Tones() {
  return (
    <Toaster>
      <ToneButtons />
    </Toaster>
  );
}

Eylemli

Tek bir eylem, ör. “Geri al”. Eyleme basınca bildirim kapanır. Eylem başka yoldan da yapılabilmelidir, çünkü bildirim kendiliğinden kapanır.

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

function DeleteButton() {
  const toast = useToast();
  return (
    <Button
      variant="secondary"
      onClick={() => toast.show({ title: 'Öğe silindi', action: { label: 'Geri al', onClick: () => undefined } })}
    >
      Bildirim göster
    </Button>
  );
}

export default function WithAction() {
  return (
    <Toaster>
      <DeleteButton />
    </Toaster>
  );
}

Yükleniyor, sonra başarı ya da hata

promise döner simgeli bir bildirim gösterir; söz yerine gelince aynı bildirim başarıya, reddedilince hataya dönüşür.

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

const wait = (fail: boolean) => new Promise((resolve, reject) => setTimeout(fail ? reject : resolve, 2000));

function SaveButtons() {
  const toast = useToast();
  const save = (fail: boolean) =>
    void toast
      .promise(wait(fail), {
        loading: { title: 'Kaydediliyor' },
        success: { title: 'Değişiklikler kaydedildi' },
        error: { title: 'Kaydedilemedi', description: 'Bağlantınızı kontrol edip yeniden deneyin.' },
      })
      .catch(() => undefined);
  return (
    <div className="flex gap-sm">
      <Button onClick={() => save(false)}>Kaydet</Button>
      <Button variant="secondary" onClick={() => save(true)}>
        Hatalı kaydet
      </Button>
    </div>
  );
}

export default function PromiseExample() {
  return (
    <Toaster>
      <SaveButtons />
    </Toaster>
  );
}

Açık ve koyu mod

Bildirim color-surface-raised ve shadow-overlay kullanır; ikonlar durum renklerini alır.

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

const toasts: (ToastOptions & { button: string })[] = [
  { button: 'Nötr', tone: 'neutral', title: 'Bağlantı kopyalandı' },
  { button: 'Başarı', tone: 'success', title: 'Değişiklikler kaydedildi', description: 'Son düzenlemeniz kaydedildi.' },
  { button: 'Bilgi', tone: 'info', title: 'Yeni sürüm hazır', description: 'Sayfayı yenilediğinizde açılır.' },
  { button: 'Uyarı', tone: 'warning', title: 'Bağlantı yavaş', description: 'Değişiklikler gecikmeli kaydedilebilir.' },
  { button: 'Hata', tone: 'danger', title: 'Kaydedilemedi', description: 'Bağlantınızı kontrol edip yeniden deneyin.' },
];

function ToneButtons() {
  const toast = useToast();
  return (
    <div className="flex flex-wrap gap-sm">
      {toasts.map(({ button, ...options }) => (
        <Button key={button} variant="secondary" onClick={() => toast.show(options)}>
          {button}
        </Button>
      ))}
    </div>
  );
}

export default function Tones() {
  return (
    <Toaster>
      <ToneButtons />
    </Toaster>
  );
}