Popconfirm

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

Popconfirm.tsx

Storybook

Popconfirm · Playground

Popconfirm, @bigbang/ui paketindedir.

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

<Popconfirm
  trigger={<Button variant="secondary">Arşivle</Button>}
  title="Bu kayıt arşivlensin mi?"
  confirmLabel="Arşivle"
  onConfirm={archive}
/>;

Özellikler

triggerZorunlu

Açıklama

Onay isteyen işlemin düğmesi; genellikle Button ya da IconButton.

Tür

ReactElement

titleZorunlu

Açıklama

Soru, örneğin "Bu kartı silmek istiyor musunuz?". Paneli adlandırır.

Tür

ReactNode

description

Açıklama

Sonucu söyleyen tek cümle, örneğin "Bu işlem geri alınamaz.".

Tür

ReactNode

confirmLabel

Açıklama

Onay düğmesinin etiketi: işlemin fiili, örneğin "Sil". Verilmezse ui.popconfirm.confirm ("Onayla" ya da "Confirm").

Tür

string

cancelLabel

Açıklama

Vazgeç düğmesinin etiketi. Verilmezse ui.popconfirm.cancel ("Vazgeç" ya da "Cancel").

Tür

string

tone

Açıklama

danger, silen ya da geri alınamayan işlemler için onay düğmesine tehlike tonunu verir.

Tür

'neutral' | 'danger'

Varsayılan

'neutral'

onConfirmZorunlu

Açıklama

Onayda çağrılır. Promise döndürürse onay düğmesi yükleniyor gösterir ve panel iş bitince kapanır.

Tür

() => void | Promise<unknown>

onCancel

Açıklama

Vazgeç, Escape ya da dışarı tıklamada çağrılır.

Tür

() => void

side

Açıklama

Panelin tetikleyicinin hangi tarafında açılacağı; yer yoksa karşı tarafa geçer.

Tür

PopoverSide

Varsayılan

'top'

align

Açıklama

Bu taraf boyunca hizalama.

Tür

'start' | 'center' | 'end'

Varsayılan

'center'

open

Açıklama

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

Tür

boolean

defaultOpen

Açıklama

Kontrolsüz kullanımda 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

Veri öznitelikleri

• data-component="popconfirm" ve data-tone: panelde.
• data-part: header, footer.