التأكيد السريع · المكوّنات

المعاينة

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

التثبيت

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

الاستخدام

popconfirm.tsx

import { Button } from "@/components/ui/button";import { Popconfirm, PopconfirmContent, PopconfirmTrigger } from "@/components/ui/popconfirm";<Popconfirm>  <PopconfirmTrigger render={<Button variant="outline" />}>Make default</PopconfirmTrigger>  <PopconfirmContent title="Set as default account?" okText="Set default" onConfirm={setDefault} /></Popconfirm>

أمثلة

الخطر

‏tone="danger" لإزالة شيء يمكن إعادته: زر التأكيد أحمر والأيقونة تحذير، ويبدأ التركيز على «إلغاء» كي لا يحذف Enter شيئًا بالخطأ.

إنجليزيمعكوسعربي

احصل على الكود

← RTL

الموضع، بلا أيقونة ولا وصف

‏placement="bottom" حين لا مكان فوق الزر، وإلا انقلبت وحدها. icon={false} وترك description يُبقيان السؤال وحده.

إنجليزيمعكوسعربي

احصل على الكود

← RTL

مرجع الخصائص

Popconfirm

الخاصية	النوع	الافتراضي	الوصف
`open / defaultOpen`	`boolean`	لا يوجد	للتحكم في الفتح من الكود.
`onOpenChange`	`(open, details) => void`	لا يوجد	عند الفتح والإغلاق.

PopconfirmTrigger

الخاصية	النوع	الافتراضي	الوصف
`render`	`ReactElement`	لا يوجد	الزر الظاهر: `<Button … />`.

PopconfirmContent

الخاصية	النوع	الافتراضي	الوصف
`title`	`ReactNode`	لا يوجد	خاصية Title: السؤال، قصيرًا ومنتهيًا بعلامة استفهام. هو اسم النافذة.
`description`	`ReactNode`	لا يوجد	خاصية Show description: سطر واحد عمّا سيحدث.
`icon`	`boolean`	`true`	خاصية Show icon: معلومة للعادي وتحذير للخطر.
`tone`	`"default" \| "danger"`	`"default"`	خاصية Tone؛ الخطر يجعل زر التأكيد أحمر.
`placement`	`"top" \| "bottom"`	`"top"`	خاصية Placement. تنقلب إن لم تتسع.
`okText`	`ReactNode`	`"Confirm" / «تأكيد»`	زر التأكيد: سمِّه بالإجراء («حذف»، «تعيين»).
`cancelText`	`ReactNode`	`"Cancel" / «إلغاء»`	زر الإلغاء: يغلقها ولا يفعل شيئًا.
`onConfirm`	`() => void`	لا يوجد	عند التأكيد، ثم تُغلق.
`onCancel`	`() => void`	لا يوجد	عند الإلغاء، ثم تُغلق. Esc والنقر خارجها يغلقانها دون أيٍّ منهما.

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

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

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

المفتاح	ما يفعله
`EnterSpace`	على الزر: يفتحها وينقل التركيز إلى «تأكيد»، أو إلى «إلغاء» في الخطر.
`TabShift+Tab`	بين الزرين. الخروج منها يغلقها.
`Esc`	يغلقها ويعيد التركيز إلى الزر.

ARIA

نافذة غير مشروطة (role="dialog") اسمها السؤال ووصفها سطرها الثاني.
الأيقونة زخرفية: النبرة يحملها النص وزر التأكيد، لا اللون وحده.
لأي شيء ينقل المال أو لا يمكن التراجع عنه استخدم النافذة الحوارية.
تحتاج مؤشرًا ومساحة حول الزر: على الهاتف استخدم الدرج السفلي بالسؤال والزرين نفسيهما.

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

ينعكس

الأيقونة والنص على اليمين.
الزران في نهاية السطر: «تأكيد» في الطرف الأيسر و«إلغاء» بجانبه.

لا ينعكس

أيقونتا المعلومة والتحذير.
السهم يبقى في منتصف الزر، وأعلى وأسفل لا يتغيران.

الأرقام: الأرقام في السؤال تتبع إعداد الأرقام.
الخط العربي: السؤال body-14 Medium والوصف body-14.
النص ثنائي الاتجاه: تنقل اتجاه الزر ولغته إلى المساحة المنبثقة، ومعهما نصّا الزرين الافتراضيان. اعزل الأسماء بـ <bdi> كي يبقى اسم لاتيني بترتيبه داخل السؤال العربي.

الفحوص التي يجتازها

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

R042نص مقصوص: محتوى أعرض من صندوقه مع overflow مخفي وبلا علامة حذف
R043حاوية بعرض ثابت بالبكسل يتجاوز نصها العربي المساحة
R050نص عربي يسقط إلى خط غير الخط المعلن (مقيسًا، أو وفق الإعلان، أو لأن خط الويب فشل في التحميل)
R051تباعد حروف مطبَّق على نص عربي (يكسر الخط المتصل)