إشعار مؤقت

نظرة عامة

يُستخدم الإشعار المؤقت لتأكيد موجز لإجراء، نجاحا كان أم فشلا. جملة واحدة كحد أقصى، ولا يُعرض أكثر من إشعار واحد في الوقت نفسه.

الخصائص

الخاصية الوحيدة الأساسية هي الصيغة. القيم المذكورة شاملة.

الحالات

يعرّف الإشعار المؤقت حالتين: الافتراضية (النجاح) والخطأ.

• الافتراضية: جملة واحدة قصيرة تذكر ما حدث، مثل "تم إرسال الطلبية".
• الخطأ: جملة واحدة قصيرة تذكر ما فشل مع إجراء الاسترداد، مثل "فشل الإرسال. تحقق من اتصالك".

السلوك

الإشعار المؤقت عابر: يطفو فوق المحتوى دون أن يحجبه أو يوقف التفاعل معه، فيبقى المستخدم قادرا على متابعة عمله خلفه. تُعرض رسالة واحدة فقط في كل مرة، فإن تتالت الأحداث تُصفّ الرسائل في طابور وتظهر واحدة تلو الأخرى. إشعار النجاح يختفي تلقائيا بعد 4 إلى 5 ثوانٍ، بينما يبقى إشعار الخطأ ثابتا حتى يتصرّف المستخدم أو يضغط إجراء الاسترداد.

المحتوى

جملة واحدة فقط. في حالة النجاح اذكر ما حدث، وفي حالة الفشل اذكر ما فشل بالإضافة إلى إجراء الاسترداد إن وُجد.

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

• يُعلن عنه لتقنيات المساعدة عند الظهور: بإلحاح (assertive) لإشعار الخطأ، وبأدب (polite) لإشعار النجاح.
• أي إجراء استرداد داخل الإشعار بحجم 44×44 بكسل على الأقل.
• لا تعتمد على اللون وحده، اقرنه دائما بأيقونة ونص.

الاتجاه والتوطين

الاتجاه هنا انعكاس صريح وليس منطقيا: على الويب يظهر الإشعار المؤقت أسفل يمين الشاشة في LTR، وأسفل يسارها في RTL. هذا موضع مطلق (bottom-right / bottom-left) وليس حشوا منطقيا (start/end) ينعكس تلقائيا مع المنصة، لذلك يجب عكسه صراحة في الكود عند التبديل إلى العربية بدل الاعتماد على الانعكاس التلقائي. على الجوال يبقى الموضع أسفل المنتصف (bottom-center) في الاتجاهين، فلا حاجة لأي عكس هناك.

افعل ولا تفعل

الرموز المستخدمة

أمثلة

<Toast variant="success">تم إرسال الطلبية</Toast>
<Toast variant="error">فشل الإرسال. تحقق من اتصالك.</Toast>

الشيفرة

الإشعار المؤقت يُستورد من حزمة المكوّنات، ويُبنى على السطح المعكوس مع أيقونة حالة تونية من رمز دلالي. الاستخدام في React أولا، ثم قلب التطبيق.

import { Toast } from "@mercato/components";

<Toast variant="success">تم إرسال الطلبية</Toast>
<Toast variant="error">فشل الإرسال. تحقق من اتصالك.</Toast>

// Status icon + its color per variant, from tokens.
const TOAST_ICON = {
  success: { icon: "check_circle", color: "var(--brand-success)" },
  error:   { icon: "error",        color: "var(--brand-danger-out)" },
};

const t = TOAST_ICON[variant];
// bg-ink / text-canvas keep the inverse surface pair token-driven.
<div role="status" className="inline-flex items-center gap-2 rounded-full bg-ink px-4 py-2.5 text-canvas shadow-lg">
  <span className="material-symbol" style={{ color: t.color }}>{t.icon}</span>
  <span className="truncate">{children}</span>
</div>

السطح المعكوس والنص من رمزَي bg-ink وtext-canvas، لا من أبيض وأسود صريحين: الوضع الداكن وإعادة العلامة يسريان تلقائيا.

مكوّنات ذات صلة