Toast

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

Toast.tsx

Storybook

Toast · Playground

Toast, @bigbang/ui paketindedir. Uygulamayı Provider içinde bir kez Toaster ile sarın.

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

<Provider locale="tr-TR">
  <Toaster>
    <App />
  </Toaster>
</Provider>;

function SaveButton() {
  const toast = useToast();
  return <Button onClick={() => toast.show({ tone: 'success', title: 'Değişiklikler kaydedildi' })}>Kaydet</Button>;
}

Özellikler

childrenZorunlu

Açıklama

Uygulama; içindeki her yerde useToast çalışır. Kökün yakınında, Provider içinde tek bir Toaster kullanın.

Tür

ReactNode

limit

Açıklama

Aynı anda gösterilen en fazla bildirim; eskiler yığından söner.

Tür

number

Varsayılan

3

timeout

Açıklama

Bildirimin kapanmasına kadar geçen milisaniye. Bölgenin üzerine gelindiğinde ve odaklanıldığında süre durur.

Tür

number

Varsayılan

5000

label

Açıklama

F6 ile ulaşılan bildirim bölgesinin adı. Varsayılanı ui.toast.region kütüphane metnidir ("Bildirimler" ya da "Notifications").

Tür

string

material

Açıklama

'solid', cam bir Provider altında bildirimleri opak tutar.

Tür

'auto' | 'solid'

Varsayılan

'auto'

useToast

useToast() en yakın Toaster’a bağlanır ve şu yöntemleri döndürür:

Yöntem	Ne yapar
show(options)	Bildirim ekler, kimliğini döndürür.
update(id, options)	Açık bildirimi değiştirir.
close(id?)	Bir bildirimi, kimlik verilmezse hepsini kapatır.
promise(promise, { loading, success, error })	Döner simgeli bir yükleniyor bildirimi gösterir; söz yerine gelince başarı, reddedilince hata bildirimine dönüşür. success ve error sonuca göre içerik üreten bir fonksiyon da olabilir.

ToastOptions

Özellik	Tip	Açıklama
title	ReactNode	Ne olduğu, birkaç sözcükle. Zorunlu.
description	ReactNode	Başlık yetmezse bir cümle daha.
tone	'neutral' | 'success' | 'info' | 'warning' | 'danger'	Renk ve ikon. Varsayılan neutral.
action	{ label, onClick }	Tek eylem, ör. “Geri al”. Basınca bildirim kapanır.
timeout	number	Milisaniye; 0 açık tutar. 5000’den küçük değerler 5000’e çıkar. danger ve action taşıyan bildirim için varsayılan 0.
id	string	Aynı kimlik yeni bildirim eklemek yerine var olanı günceller.
onClose	() => void	Bildirim nasıl kapanırsa kapansın çalışır.

Veri öznitelikleri

• data-component="toaster": bölge üzerinde. data-component="toast" ve data-tone: her bildirim üzerinde (loading dahil).
• data-expanded, data-limited, data-swiping, data-swipe-direction: Base UI’dan.