مركز الإشعارات

صندوق وارد كامل للنشاط مع ثلاث علامات تبويب فلترة متحركة، وجداول زمنية مجمّعة، وحالات غير مقروءة، ومرئيات الصورة الرمزية والحالة، وإجراءات مضمّنة اختيارية، وسلوك تحديد الكل كمقروء، وحالة فارغة مركّبة.

التثبيت

يمكنك إضافة كتلة تطبيق مركز الإشعارات باستخدام CLI الخاص بنا أو يدويًا:

الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.

CLI

يدوي

تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.

npx boardui@latest add notification-center

هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.

التصفية

يمتلك المركز فلتره النشط افتراضياً. استخدم defaultTab للعرض الأولي، أو دمج tab و onTabChange عندما يحتاج المنتج المحيط إلى حالة متحكَّم بها.

<NotificationCenter  notifications={notifications}  defaultTab="mentions"/>
{/* Controlled filtering */}<NotificationCenter  notifications={notifications}  tab={activeTab}  onTabChange={setActiveTab}/>

بيانات الإشعارات والإجراءات

كل عنصر يُعلن عن فئة التصفية ومجموعة الجدول الزمني. أضف صورة رمزية أو أيقونة حالة دلالية، واضبط unread، وإرفاق إجراءات صغيرة. يؤدي الضغط على الإجراء إلى تعليم ذلك العنصر كمقروء والإبلاغ عن كلا المعرّفَين عبر onAction.

const notification = {  id: "deploy-failed",  category: "system", // mentions | system | activity  group: "Earlier this week",  title: "Preview deployment failed",  description: "The build stopped while validating routes.",  timestamp: "Sat",  unread: true,  status: "error", // neutral | information | success | error  actions: [    { id: "retry", label: "Retry", variant: "primary" },    { id: "logs", label: "View logs", variant: "secondary" },  ],};