إشعار

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

التثبيت

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

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

CLI

يدوي

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

npx boardui@latest add notification

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

الحالات

تعيين status إلى معلومات، أو نجاح، أو خطأ. يوفر كل حالة دور المنطقة الحية الدلالية والأيقونة الافتراضية وألوان التمييز.

<Notification  status="information"  title="New version available"  description="Refresh to start using the latest dashboard updates."/>
<Notification  status="success"  title="Changes saved"  description="Your workspace settings have been updated."/>
<Notification  status="error"  title="Upload failed"  description="Check the file size and try again."/>

الأيقونات والصور الرمزية

مرر أي أيقونة Remix عبر أيقونة، أو استبدل الأيقونة بـ avatar. يمكن لإشعارات الصورة الرمزية إظهار حالة الاتصال أو الانشغال أو عدم الاتصال.

import { RiSparklingFill } from "@remixicon/react";
{/* Custom icon */}<Notification  icon={RiSparklingFill}  title="Custom icon"  description="Use any Remix icon."/>
{/* Avatar with presence */}<Notification  avatar={{    src: "/avatars/livia-saris.webp",    alt: "Livia Saris",    presence: "busy",  }}  title="Livia Saris"  timestamp="just now"  description="Mentioned you in the launch checklist."/>

أزرار الإجراءات

الـ actions المصفوفة تعرض أزرار BoardUI صغيرة وتدعم متغيرات primary وsecondary وdanger.

<Notification  status="information"  title="Backup ready"  description="Your latest workspace backup is ready to download."  actions={[    { label: "Not now", variant: "secondary", onClick: dismiss },    { label: "Download", variant: "primary", onClick: download },  ]}/>

الموضع

استخدم position الخاصية على NotificationViewport لتثبيت المجموعة في أي زاوية أو مركز أفقي لمنفذ عرض المتصفح.

import {  Notification,  NotificationViewport,} from "@/components/base/notification/notification";
<NotificationViewport position="top-center">  <Notification    status="information"    title="New version available"    description="Refresh to start using the latest dashboard updates."  /></NotificationViewport>
{/* Available positions:    top-left, top-center, top-right,    bottom-left, bottom-center, bottom-right */}

إغلاق مؤقت

تعيين autoDismissDuration بالميلي ثانية لعرض شريط عدّ تنازلي متزامن بعرض 3 بكسل وإغلاق الإشعار عند وصوله إلى الصفر. استخدم NotificationViewport لإرسال الإشعارات المتكررة إلى مكدس متحرك بسلاسة عند حافة إطار عرض المتصفح.

const [notifications, setNotifications] = useState([]);
function showNotification(variant) {  setNotifications((current) => [    ...current,    { id: crypto.randomUUID(), variant },  ]);}
<Button onClick={() => showNotification("success")}>Replay notification</Button><Button onClick={() => showNotification("information")}>Information</Button><Button onClick={() => showNotification("error")}>Error</Button><Button onClick={() => showNotification("avatar")}>With avatar</Button><Button onClick={() => showNotification("actions")}>With buttons</Button>
<NotificationViewport>  {notifications.map((notification) => (    <Notification      {...variants[notification.variant]}      key={notification.id}      autoDismissDuration={2500}      introDelay={0}      onDismiss={() =>        setNotifications((current) =>          current.filter((item) => item.id !== notification.id)        )      }    />  ))}</NotificationViewport>