البناء · جديد

النافذة المنبثقة

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

المعاينة

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

التثبيت

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

npx shadcn@latest add @ritla/popover

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

الاستخدام

import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>Share</PopoverTrigger>
  <PopoverContent title="Share this report" description="Anyone with the link can view it.">
    …
  </PopoverContent>
</Popover>

أمثلة

تصفية

خيارات قليلة وزر «تطبيق» (PopoverClose) يغلقها ويعيد التركيز إلى الزر. بلا زر إغلاق هنا: «إلغاء» وEsc يكفيان.

الجهات

‏side: أسفل (الافتراضي) وأعلى والبداية والنهاية. البداية والنهاية تتبعان اتجاه القراءة، فالبداية على اليمين بالعربية، والسهم يشير دائمًا إلى الزر. إن لم تتسع الجهة انقلبت إلى المقابلة.

مرجع الخصائص

Popover

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

PopoverTrigger

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

PopoverContent

الخاصية	النوع	الافتراضي	الوصف
`title`	`ReactNode`		خاصية Title: الغرض منها، وهو اسم النافذة.
`description`	`ReactNode`		خاصية Description: سطر واحد تحت العنوان.
`children`	`ReactNode`		المحتوى: حقل وزر، أو خيارات قليلة.
`side`	`"bottom" \| "top" \| "start" \| "end"`	`"bottom"`	خاصية Side. تنقلب إن لم تتسع.
`align`	`"start" \| "center" \| "end"`	`"center"`	المحاذاة على طول تلك الجهة.
`arrow`	`boolean`	`true`	السهم نحو الزر.
`closeButton`	`boolean`	`true`	زر الإغلاق في نهاية الترويسة.
`closeLabel`	`string`	`"Close" / «إغلاق»`	اسم زر الإغلاق.
`sideOffset`	`number`	`12`	المسافة عن الزر.
`initialFocus / finalFocus`	`RefObject<HTMLElement>`		أين يبدأ التركيز وأين يعود.

PopoverClose

الخاصية	النوع	الافتراضي	الوصف
`render`	`ReactElement`		زر في المحتوى يغلقها: «تطبيق»، «تم».

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

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

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

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

ARIA

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

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

ينعكس

البداية والنهاية: البداية على اليمين بالعربية.
زر الإغلاق في نهاية الترويسة: على اليسار.
السهم يتبع الجهة ويشير إلى الزر في الاتجاهين.

لا ينعكس

الروابط والرموز والمعرّفات تبقى من اليسار إلى اليمين.
أسفل وأعلى لا يتغيران.

الأرقام: الأرقام داخلها تتبع إعداد الأرقام.
الخط العربي: العنوان label-16 Semibold والوصف label-14.
النص ثنائي الاتجاه: تنقل اتجاه الزر ولغته إلى المساحة المنبثقة، فمعاينة عربية في صفحة إنجليزية تبقى عربية. الحقل ذو dir="ltr" يبقي الرابط كاملًا من اليسار إلى اليمين.

كل المكونات ›