البناء · جديد

الإشعار المنبثق

يؤكد ما حدث للتو دون أن يوقف أحدًا. أضف إجراءً واحدًا مثل «تراجع» أو «إعادة المحاولة» فيصبح شريط إشعار (Snackbar).

المعاينة

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

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/toast

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react

الاستخدام

import { Toaster, toast } from "@/components/ui/toast";

// Once, in the root layout:
<Toaster />

// Anywhere:
toast({ message: "Card removed", action: { label: "Undo", onClick: restoreCard } });

أمثلة

التراجع

تُزال البطاقة فورًا، و«تراجع» يعيدها. الإشعار الذي فيه إجراء يبقى حتى يُستخدم أو يُخفى، فلا تضيع الفرصة.

الأنواع

‏Toast يعرض الشكل وحده دون مؤقت. الافتراضي لمعظم التأكيدات، والنجاح والخطأ والتحذير حين تهم النتيجة، والعلامة نادرًا. والتحذير يبقى بألوانه الفاتحة في الوضع الداكن.

مرجع الخصائص

toast()

الخاصية	النوع	الافتراضي	الوصف
`message`	`string`		خاصية Message: ما حدث في سطر، وهو ما يُعلن لقارئ الشاشة.
`type`	`"default" \| "brand" \| "success" \| "error" \| "warning"`	`"default"`	خاصية Type. الخطأ يُعلن فورًا.
`action`	`{ label: string; onClick: () => void }`		خاصية Show action: إجراء واحد يُبقي الإشعار ظاهرًا.
`icon`	`IconComponent \| null`		خاصية Leading icon؛ `null` لإخفائها.
`dismiss`	`boolean`	`true`	خاصية Show dismiss.
`timeout`	`number`	`5000 / 0`	بالملّي ثانية؛ صفر (يبقى) حين يكون فيه إجراء.
`toast.dismiss(id?)`	`function`		يغلق إشعارًا أو كل الإشعارات.

Toaster

الخاصية	النوع	الافتراضي	الوصف
`offset`	`string`		مسافة إضافية أسفل الإشعارات على الجوال، فوق شريط التنقل.

Toast

الخاصية	النوع	الافتراضي	الوصف
`message / type / icon`	`ReactNode / ToastType / IconComponent \| null`		الشكل وحده، للاستخدام الثابت.
`action / dismiss`	`ReactNode`		‏`ToastActionButton` و`ToastDismissButton`.

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

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

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

المفتاح	ما يفعله
`Tab`	إلى الإجراء وزر الإخفاء؛ التركيز لا ينتقل إلى الإشعار وحده.

ARIA

الإشعار يُعلن بهدوء (status)، والخطأ بإلحاح (alert)، ويبقى التركيز حيث هو.
يتوقف المؤقت عند المرور أو التركيز، والإشعار الذي فيه إجراء لا يختفي وحده.
لزر الإخفاء اسم («إخفاء»)، والخطأ لا يُعرف باللون وحده: الرسالة تقوله.

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

ينعكس

الأيقونة والرسالة على اليمين، والإجراء وزر الإخفاء على اليسار.
على الشاشات الكبيرة تظهر في أسفل بداية الصفحة من جهة النهاية، أي أسفل اليسار.
كل إشعار يأخذ اتجاه المكان الذي أُطلق منه ولغته.

لا ينعكس

الإشعار يدخل ويُسحب للأسفل عموديًا في اللغتين.

الأرقام: المبالغ في الرسالة تتبع إعداد الأرقام وتُقرأ من اليسار إلى اليمين.
الخط العربي: الرسالة body-14 Medium في سطر واحد، وارتفاع الإشعار 48 بكسل على الأقل.
النص ثنائي الاتجاه: اكتب الرسالة العربية قصيرة كالإنجليزية: «أُزيلت البطاقة».

كل المكونات ›