لوح منبثق

Popover

لوحة منبثقة في React مبنية على Radix لمحتوى غني مثبت على مشغل: نماذج تحرير مضمنة، مرشحات، ومعاينات، مع سهم اختياري وحصر للتركيز في وضع modal.

فتح في Storybook ↗

يعرض Popover محتوى غنياً مثبتاً على مشغل. تحمل اللوحة role="dialog"، لذلك أعطها aria-label. مرر modal لحصر التركيز.

متى تستخدمه

استخدم Popover حين تحتاج أداة إلى لوحة صغيرة من المحتوى التفاعلي بجانبها: نموذج تحرير مضمن، قائمة تواريخ جاهزة، أو مرشح سريع. استخدم Tooltip للتلميحات المخصصة للقراءة فقط، وModal للمهام التي يجب أن تحجب الصفحة.

مرر modal حين تحوي اللوحة نموذجاً يجب على المستخدم إنهاؤه.

أمثلة

افتراضي

مع سهم

نموذج تحرير مضمن

الخصائص

الخصائص التي يعرفها Popover. سمات العنصر الأصلي تمر كما هي.

<Popover>

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`
`open`	`boolean`
`defaultOpen`	`boolean`
`onOpenChange`	`(open: boolean) => void`
`modal`	`boolean`

<PopoverTrigger>

الخاصية	النوع	الافتراضي	الوصف
`asChild`	`boolean`

<PopoverAnchor>

الخاصية	النوع	الافتراضي	الوصف
`virtualRef`	`React.RefObject<Measurable>`
`asChild`	`boolean`

<PopoverContent>

الخاصية	النوع	الوصف
`size`	`"sm" \| "md"`
`arrow`	`boolean`	Show a small arrow pointing at the trigger. Defaults to false.
`deferPointerDownOutside`	`boolean`	When `true`, a `'pointerdown'` event outside of the layered element will wait for the interaction's click event before dispatching, allowing third-party code to stop propagation of later events and cancel dismissal.
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	Event handler called when the escape key is down. Can be prevented.
`onPointerDownOutside`	`(event: PointerDownOutsideEvent) => void`	Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
`onFocusOutside`	`(event: FocusOutsideEvent) => void`	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
`onInteractOutside`	`(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void`	Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
`forceMount`	`true`	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
`onOpenAutoFocus`	`(event: Event) => void`	Event handler called when auto-focusing on open. Can be prevented.
`onCloseAutoFocus`	`(event: Event) => void`	Event handler called when auto-focusing on close. Can be prevented.
`side`	`"top" \| "right" \| "bottom" \| "left"`
`sideOffset`	`number`
`align`	`"center" \| "start" \| "end"`
`alignOffset`	`number`
`arrowPadding`	`number`
`avoidCollisions`	`boolean`
`collisionBoundary`	`Element \| Element[]`
`collisionPadding`	`number \| Partial<Record<"top" \| "right" \| "bottom" \| "left", number>>`
`sticky`	`"always" \| "partial"`
`hideWhenDetached`	`boolean`
`updatePositionStrategy`	`"always" \| "optimized"`

<PopoverClose>

الخاصية	النوع	الافتراضي	الوصف
`closeLabel`	`string`		Localized label for the default corner-X button. Only used when no `children` (and no `asChild`) are provided. Defaults to `"Close"`, or `"إغلاق"` when the DgaProvider locale is Arabic.
`asChild`	`boolean`

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

تحمل اللوحة role="dialog"، لذلك أعطها aria-label أو aria-labelledby. يغلق مفتاح Escape اللوحة، ويعود التركيز إلى المشغل. عند تمرير modal، يبقى التركيز محصوراً داخل اللوحة.

اربط اللوحة بمشغل قابل للتركيز ليفتحها مستخدم لوحة المفاتيح.