لوح منبثق

Popover

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

افتح في ستوري بوك ↗

يثبت 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"`.
`asChild`	`boolean`

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

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

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