تخطّي إلى المحتوى الرئيسي

إشعار Notification

رد أثقل من Message: يحمل عنوانًا / متنًا / أيقونة نوع، ويظهر من زوايا الشاشة الأربع، ويناسب الإشعارات النظامية ذات المحتوى الأطول.

الاستخدام الأساسي​

الاستخدام الأساسي
import { notification } from '@lh-ui/react'
import '@lh-ui/react/style/notification'

notification.success({ title: 'تم الحفظ بنجاح', content: 'تم نشر العمل في المعرض.' })

// صيغة مختصرة كسلسلة: يُعرض صف العنوان فقط
notification.info('إشعار من النظام')

دوال notification​

دالةالوصفالقيمة المعادة
info / success / warning / error / dangerإظهار إشعار{ close }
closeإغلاق إشعار محدد (مع تشغيل حركة الخروج أولًا)void
closeAllإغلاق جميع الإشعارات وإلغاء تركيب الحاويةvoid
const handle = notification.warning({ title: 'مساحة التخزين غير كافية' })
handle.close()

LhNotificationOptions​

خاصيةالوصفالنوعالافتراضي
titleالعنوان (يُؤخذ من content عند عدم تمريره)string—
contentالمتن (عند مساواته لـ title يُعرض صف العنوان فقط)string—
durationالمللي ثانية قبل الإغلاق التلقائي، و0 يعني عدم الإغلاق التلقائيnumber4500
positionموضع الظهور'top-right' | 'top-left' | 'bottom-right' | 'bottom-left''top-right'
showCloseهل يُظهر زر الإغلاقbooleantrue
closeLabelaria-label الخاص بزر الإغلاقstringحزمة اللغة (zh-CN: 关闭通知)
onClickرد الاستدعاء عند النقر (البطاقة قابلة للنقر عند تمريره)() => void—
onCloseرد الاستدعاء عند الإغلاق() => void—
sxخصائص التخطيط السريعSxProps—
حركة الخروج

لا يوجد transition-group في React، فيدير كل إشعار خروجه بنفسه: عند الإغلاق تُشغَّل lh-notification-slide-leave-* (280 مللي ثانية) أولًا ثم يُحذف السجل. حركة FLIP لإفساح المكان غير مطبّقة: تقفز البطاقات الشقيقة فورًا عند زيادة الطابور ونقصانه، ويُعالج تباعد التكدّس بواسطة flex gap الخاص بالحاوية.

إمكانية الوصول

warning / danger هما role="alert" (إعلان فوري)، وinfo / success هما role="status" (إعلان في الطابور)؛ والحاوية هي role="region" + aria-live="polite".

الأنماط​

import '@lh-ui/react/style/notification'