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

تجريبي

احصل على Ritla UI

اللوحة التي يفتحها الجرس: تبويبات وإشعارات مجمّعة حسب اليوم، وغير المقروء مميّز.

افتح في Figma

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

أضف المكوّن
$ npx ritla add notification-centre
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/notification-centre
الاعتماديات التي يضيفها
@phosphor-icons/react
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

notification-centre.tsx

import { NotificationCentre } from "@/components/ui/notification-centre";<NotificationCentre title="Notifications" tabsLabel="Notification types" tabs={tabs} empty={{ title: "You're all caught up", description: "New activity will show here." }} />

مرجع الخصائص

NotificationCentre

الخاصية	النوع	الافتراضي	الوصف
`tabs`	`NotificationTab[]`	لا يوجد	لكل تبويب `value` و`label` ومجموعات من الإشعارات.
`onMarkAllRead / markAllReadLabel`	`() => void / string`	لا يوجد	«تحديد الكل كمقروء»، معطّل حين لا جديد.
`settings`	`{ label, href }`	لا يوجد	رابط الإعدادات في الأسفل.
`empty`	`{ title, description }`	لا يوجد	الحالة الفارغة.
`tabsLabel / unreadLabel`	`string`	لا يوجد	اسم التبويبات، وكلمة «غير مقروء».

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

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`ArrowRightArrowLeft`	ينتقل بين التبويبات؛ ينعكس في العربية.
`Tab`	ينتقل إلى الإشعارات (روابط).

ARIA

غير المقروء يُقرأ «غير مقروء» بعد العنوان، ولا يعتمد على اللون.
ضعه في نافذة منبثقة يفتحها زر الجرس.

ملاحظات العربية والاتجاه

ينعكس

الأيقونة في البداية ونقطة غير المقروء في النهاية، والتبويبات تبدأ من اليمين.

لا ينعكس

علامتا التحديد لا تنعكسان.

الأرقام: المبالغ والأوقات كما يمرّرها التطبيق.
الخط العربي: العنوان label-14 Semibold والتفاصيل body-12.