Bileşenler

AlertDialog

Görevi kesen ve tek bir soruya onay ya da vazgeçme isteyen kalıcı pencere.

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

Başlık soruyu sorar, açıklama sonucunu anlatır. Onay etiketi kararı tekrarlayan bir fiildir; Vazgeç metni kütüphaneden gelir.

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

export default function Default() {
  return (
    <AlertDialog
      trigger={<Button variant="secondary">Değişiklikleri kaydet</Button>}
      title="Değişiklikler kaydedilsin mi?"
      description="Kaydettiğinizde önceki sürümün yerini alır."
      confirmLabel="Kaydet"
      onConfirm={() => {}}
    />
  );
}

Yıkıcı karar

tone="danger" onay eylemini kırmızı yapar. Odak yine Vazgeç’te başlar, böylece Enter yanlışlıkla silmez.

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

export default function Danger() {
  return (
    <AlertDialog
      tone="danger"
      icon="trash"
      trigger={
        <Button variant="secondary" tone="danger">
          Öğeyi sil
        </Button>
      }
      title="Öğe silinsin mi?"
      description="Bu işlem geri alınamaz."
      confirmLabel="Sil"
      onConfirm={() => {}}
    />
  );
}

Süren işlem

onConfirm bir promise döndürürse onay butonu dönen gösterge alır, Vazgeç devre dışı kalır ve Escape yok sayılır. Promise çözülünce pencere kapanır; reddedilirse açık kalır.

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

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

export default function Async() {
  return (
    <AlertDialog
      tone="danger"
      trigger={
        <Button variant="secondary" tone="danger">
          Öğeyi sil
        </Button>
      }
      title="Öğe silinsin mi?"
      description="Bu işlem geri alınamaz."
      confirmLabel="Sil"
      onConfirm={() => wait(1500)}
    />
  );
}

Açık ve koyu mod

Panel ve arka plan Dialog ile aynı token’ları kullanır.

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

export default function Danger() {
  return (
    <AlertDialog
      tone="danger"
      icon="trash"
      trigger={
        <Button variant="secondary" tone="danger">
          Öğeyi sil
        </Button>
      }
      title="Öğe silinsin mi?"
      description="Bu işlem geri alınamaz."
      confirmLabel="Sil"
      onConfirm={() => {}}
    />
  );
}