AlertDialog

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

AlertDialog.tsx

Storybook

AlertDialog · Playground

AlertDialog, @bigbang/ui paketindedir.

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

<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={() => deleteItem()}
/>;

Özellikler

titleZorunlu

Açıklama

Verilecek karar, ör. "Öğe silinsin mi?". Pencereye ad verir.

Tür

ReactNode

descriptionZorunlu

Açıklama

Onaylanırsa ne olacağı, özellikle neyin geri alınamayacağı. Pencere açılınca okunur.

Tür

ReactNode

confirmLabelZorunlu

Açıklama

Onay eyleminin etiketi: kararı tekrarlayan bir fiil, ör. "Sil"; asla "Tamam" değil.

Tür

string

cancelLabel

Açıklama

Vazgeç eyleminin etiketi. Varsayılanı ui.alertDialog.cancel kütüphane metnidir ("Vazgeç" ya da "Cancel").

Tür

string

tone

Açıklama

danger, yıkıcı bir kararda onay eylemini kırmızı yapar. Odak yine Vazgeç'te başlar.

Tür

'neutral' | 'danger'

Varsayılan

'neutral'

icon

Açıklama

Başlığın yanında 40 px'lik bir kutuda süs ikonu, ör. trash; tone danger ise kutu kırmızı zemin alır.

Tür

IconName

onConfirmZorunlu

Açıklama

Kararı uygular. Bir promise döndürürseniz pencere o sonuçlanana kadar açık ve meşgul kalır: çözülünce kapanır, reddedilince açık kalır; hatayı gövdede gösterin.

Tür

() => void | Promise<unknown>

children

Açıklama

Açıklamanın altında ek içerik, ör. etkilenen öğelerin listesi.

Tür

ReactNode

trigger

Açıklama

Pencereyi açan öğe, genellikle bir Button. Pencereyi open ile yönetecekseniz vermeyin.

Tür

ReactElement

open

Açıklama

Kontrollü açık durum. onOpenChange ile birlikte verin.

Tür

boolean

defaultOpen

Açıklama

Pencere kontrolsüz kullanıldığında ilk çizimdeki açık durum.

Tür

boolean

Varsayılan

false

onOpenChange

Açıklama

Yeni açık durumla çağrılır.

Tür

(open: boolean) => void

material

Açıklama

'solid', cam bir Provider altında diyaloğu opak tutar; ör. children uzun bir liste içeriyorsa.

Tür

'auto' | 'solid'

Varsayılan

'auto'

Veri öznitelikleri

• data-component="alert-dialog", data-tone, data-size="sm": panel üzerinde.
• aria-busy="true": işlem sürerken panel üzerinde.