النافذة السياقية

تعرض النافذة المنبثقة محتوىً سياقياً في لوحة عائمة مرتبطة بعنصر مشغّل. تدعم مشغّلات الزر والرابط والموضع العلوي/السفلي ومحاذاة الإجراء القابلة للإعداد.

Loading demo: popover-real-world

التثبيت

npx sdaia-ui@latest add popover

الاستخدام

import { Popover } from "@/components/ui/popover"

<Popover type="button" placement="bottom" actionsAlignment="start" />

الأمثلة

الافتراضي

النافذة المنبثقة الافتراضية بمشغّل زر مرتبط أسفل مع إجراءات محاذاة لبداية السطر.

Loading demo: popover-default

الرابط

النافذة المنبثقة المشغَّلة برابط نصي. انقر لفتحها وإغلاقها.

Loading demo: popover-link

الزر

النافذة المنبثقة المشغَّلة بزر.

Loading demo: popover-button

الموضع

النافذة المنبثقة موضوعة أعلى أو أسفل عنصر المشغّل.

Loading demo: popover-placement

مرجع الواجهة البرمجية

PopoverProps

خصائص مكوّن Popover.

Prop	Type	Default	Required
open	boolean	-	optional
defaultOpen	boolean	false	optional
onOpenChange	(open: boolean) => void	-	optional
trigger	ReactNode	-	optional
triggerType	'button' \| 'link'	'button'	optional
triggerLabel	string	'Open'	optional
featuredIcon	ReactNode	-	optional
title	string	-	optional
helperText	ReactNode	-	optional
supportingText	ReactNode	-	optional
image	string \| ReactNode	-	optional
imageAlt	string	''	optional
instanceRowCount	number	0	optional
instanceRows	ReactNode	-	optional
children	ReactNode	-	optional
showCloseButton	boolean	true	optional
primaryActionLabel	string	-	optional
secondaryActionLabel	string	-	optional
onPrimaryAction	() => void	-	optional
onSecondaryAction	() => void	-	optional
actionsAlignment	'start' \| 'center' \| 'end'	'start'	optional
placement	'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \|...	'bottom'	optional
showBeak	boolean	true	optional
dir	'ltr' \| 'rtl'	-	optional

المخطط الدائري

دائرة التقدم