Bildirimler
Olay tabanlı toast bildirim sistemi. İki parçadan oluşur: bildirimleri
ekranda listeleyen Notifications host bileşeni ve herhangi bir yerden
çağrılabilen notifications yardımcısı. Aralarındaki iletişim window
üzerinde CustomEvent ile kurulur; Redux ya da Context gerekmez.
import { Notifications, notifications } from "@dataliva/livalib";
Önemli: Notifications host bileşeni uygulamada yalnızca bir kez, genellikle
kök layout içinde mount edilmelidir. Birden fazla host aynı olayları
dinlediği için her bildirim çoğaltılmış görünür. Bu sayfadaki host ilk
örneğin içinde yer alır; diğer örnekler de aynı host üzerinden çalışır.
Bildirim tipleri
notifications.show(...) dört tipten biriyle çağrılır: success, error,
warning, info. title isteğe bağlıdır; message bildirim gövdesini
oluşturur.
Kalıcı bildirim, kapatma ve temizleme
autoClose: false bildirimi kalıcı yapar; kullanıcı kapatana ya da programla
notifications.hide(id) çağrılana kadar ekranda kalır. show(...) çağrısı
sonradan kullanılmak üzere bildirimin kimliğini döndürür.
notifications.clean() ekrandaki tüm bildirimleri kaldırır.
Başlık, özel ikon ve süre
icon alanı varsayılan tip ikonunun yerine geçer; autoClose alanına
milisaniye cinsinden sayı verilerek görünme süresi bildirime özel
ayarlanabilir.
Notifications (host)
| Prop | Tip | Varsayılan |
|---|---|---|
position | 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'bottom-right' |
zIndex | number | 9999 |
autoClose | number | 4000 |
limit | number | 5 |
limit aşıldığında en eski bildirim listeden düşürülür.
NotificationData (notifications.show parametresi)
| Alan | Tip | Varsayılan |
|---|---|---|
id | string | otomatik üretilir |
title | ReactNode | — |
message | ReactNode | — |
type | 'success' | 'error' | 'warning' | 'info' | 'info' |
autoClose | number | boolean | host'un autoClose değeri |
icon | ReactNode | tipe göre varsayılan ikon |
onOpen | (props: NotificationData) => void | — |
onClose | (props: NotificationData) => void | — |
className | string | — |
style | CSSProperties | — |
Yardımcı fonksiyonlar: notifications.show(data) kimlik döndürür,
notifications.hide(id) tek bildirimi kapatır, notifications.clean()
tümünü kaldırır, notifications.cleanQueue() sıradaki bildirimleri iptal
eder.