نافذة الحوار

نظرة عامة

نافذة الحوار تحجب بقية الشاشة وتطلب من المستخدم تأكيد إجراء مدمّر قبل تنفيذه، مثل إلغاء طلبية فرعية. تُستخدم بحذر: إن أمكن تنفيذ الإجراء ضمن الشاشة نفسها، يُفضَّل ذلك على فتح نافذة حوار.

تحمل نافذة الحوار فتحتين مسمّاتين للإجراءات: confirm وcancel، وتُملأان دائما بمكوّن Button.

الخصائص

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

الفتحات: confirm وcancel، وكلاهما يُملأ بمكوّن Button.

الحالات

تعرّف نافذة الحوار حالتين: الافتراضية والتركيز.

• الافتراضية: حالة النافذة أثناء فتحها، تحجب بقية الشاشة.
• التركيز: ينتقل التركيز إلى داخل النافذة عند فتحها ويعود إلى العنصر المُشغِّل عند إغلاقها.

السلوك

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

المحتوى

• العنوان title: يسمّي الإجراء المطلوب تأكيده، لا يكون سؤالا مجردا.
• الوصف description: يذكر العاقبة بوضوح، بما في ذلك ما إذا كان الإجراء قابلا للتراجع، مثل: لا يمكن التراجع عن هذا الإجراء.
• تأكيد confirm: فعل محدد مع اسم الإجراء المدمّر، لا نعم أبدا، مثل: إلغاء الطلبية الفرعية.
• إلغاء cancel: بديل محدد، لا لا أبدا، مثل: الاحتفاظ بها.

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

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

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

الاتجاه منطقي: صمّم بخصائص منطقية والمنصة تعكس تلقائيا. لا حاجة لتبديل يدوي بين اليمين واليسار في تخطيط النافذة أو ترتيب إجراءاتها.

افعل ولا تفعل

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

أمثلة

<Modal tone="destructive">
  <Button variant="destructive" slot="confirm">إلغاء الطلبية الفرعية</Button>
  <Button variant="secondary" slot="cancel">الاحتفاظ بها</Button>
</Modal>

الشيفرة

نافذة الحوار تُستورد من حزمة المكوّنات، وتحمل فتحتَي confirm وcancel المملوءتين بمكوّن Button. الاستخدام في React أولا، ثم قلب التطبيق المبني من الرموز.

import { Modal, Button } from "@mercato/components";

<Modal tone="destructive">
  <Button variant="destructive" slot="confirm">إلغاء الطلبية الفرعية</Button>
  <Button variant="secondary" slot="cancel">الاحتفاظ بها</Button>
</Modal>

// Surface + radius from tokens; actions are real Buttons.
<div className="p-5 shadow-2xl" style={{ backgroundColor: "var(--color-bg-base-canvas)", borderRadius: "var(--radius-xl)" }}>
  <p className="text-[16px] font-bold text-ink">{title}</p>
  <p className="mt-2 text-muted">{message}</p>
  <div className="mt-5 flex gap-2">
    {/* destructive tone forces the destructive button style on confirm */}
    <button className={"btn flex-1 " + (destructive ? "btn-destructive" : "btn-primary")}>{confirm}</button>
    <button className="btn btn-secondary flex-1">{cancel}</button>
  </div>
</div>

لا تحمل النافذة قيمة سطح أو استدارة مباشرة، وأزرارها من فئات btn نفسها: الوضع الداكن وإعادة العلامة يسريان تلقائيا عبر الرموز.

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