مرجع API لمكوّن Popover

الاستيراد

import-popover.ts

import {
  NuiHovercard,
  NuiHovercardTrigger,
  NuiPopover,
  NuiPopoverTrigger,
} from '@needless-ui/angular/popover';

NuiPopover

نافذة منبثقة أصلية تتموضع بجوار العنصر الذي فتحها.

المُحدِّد: [nuiPopover]
يُصدَّر باسم: nuiPopover

NuiPopover: الخصائص
الاسم	النوع	القيمة الافتراضية	الوصف
`side`مُدخَل	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`	جهة زر الفتح التي تُفتح عليها. وتنتقل إلى الجهة المقابلة إن لم تتسع المساحة.
`align`مُدخَل	`'start' \| 'center' \| 'end'`	`'start'`	طريقة محاذاتها مع زر الفتح على امتداد تلك الجهة.
`offset`مُدخَل	`number`	`8`	المسافة بين زر الفتح واللوحة، بالبكسل.
`arrow`مُدخَل	`boolean`	`false`	يعرض سهمًا يُشير إلى زر الفتح.
`enter`مُدخَل	`NuiEnter`		طريقة ظهوره: `zoom` أو `fade` أو `drop` أو `rise` أو `unfold` أو `flip` أو `swing` أو `slide` أو `none`.
`motion`مُدخَل	`NuiMotion`		النابض الذي يتحرك به: `snappy` أو `bouncy` أو `jelly` أو `elastic` أو `lazy` أو `mechanical` أو `none`.
`spring`مُدخَل	`NuiSpring`		أي نابض تريده بصيغة `{ stiffness, damping, mass }`، ويُحوَّل إلى CSS أثناء التشغيل. وله الأولوية على `motion`.
`corners`مُدخَل	`NuiCorners`		شكل زواياه: `round` أو `squircle` أو `bevel` أو `scoop` أو `notch` أو `square`.
`radius`مُدخَل	`NuiRadius`		حجم زواياه: `none` أو `small` أو `medium` أو `large` أو `full`.
`density`مُدخَل	`NuiDensity`		المساحة التي يشغلها: `compact` أو `regular` أو `roomy`.
`openChange`مُخرَج	`boolean`		يُطلَق عند فتحها أو إغلاقها.
`show`دالة	`(anchor: HTMLElement) => void`		يفتحها بجوار أي عنصر.
`hide`دالة	`() => void`		يُغلقها.

مُدخلات التخصيص التي تتركها دون ضبط تتبع أقرب سمة data-nui-*. راجع دليل التخصيص.

NuiPopoverTrigger

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

المُحدِّد: button[nuiPopoverTrigger]

NuiPopoverTrigger: الخصائص
الاسم	النوع	القيمة الافتراضية	الوصف
`nuiPopoverTrigger`مُدخَل	`NuiPopover`		النافذة المنبثقة المراد فتحها.

NuiHovercard

تلميح غني يصف العنصر الذي يُظهره.

المُحدِّد: [nuiHovercard]
يُصدَّر باسم: nuiHovercard

NuiHovercard: الخصائص
الاسم	النوع	القيمة الافتراضية	الوصف
`side`مُدخَل	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`	جهة العنصر المُشغِّل التي تظهر عليها. وتنتقل إلى الجهة المقابلة إن لم تتسع المساحة.
`align`مُدخَل	`'start' \| 'center' \| 'end'`	`'start'`	طريقة محاذاتها مع العنصر المُشغِّل على امتداد تلك الجهة.
`offset`مُدخَل	`number`	`8`	المسافة بين العنصر المُشغِّل والبطاقة، بالبكسل.
`arrow`مُدخَل	`boolean`	`false`	يعرض سهمًا يُشير إلى العنصر المُشغِّل.
`openDelay`مُدخَل	`number`	`500`	مدة بقاء المؤشر بالمللي ثانية قبل ظهورها. والتركيز بلوحة المفاتيح يُظهرها فورًا.
`closeDelay`مُدخَل	`number`	`300`	المدة بالمللي ثانية قبل إغلاقها، بعد أن يغادر المؤشر.
`enter`مُدخَل	`NuiEnter`		طريقة ظهوره: `zoom` أو `fade` أو `drop` أو `rise` أو `unfold` أو `flip` أو `swing` أو `slide` أو `none`.
`motion`مُدخَل	`NuiMotion`		النابض الذي يتحرك به: `snappy` أو `bouncy` أو `jelly` أو `elastic` أو `lazy` أو `mechanical` أو `none`.
`spring`مُدخَل	`NuiSpring`		أي نابض تريده بصيغة `{ stiffness, damping, mass }`، ويُحوَّل إلى CSS أثناء التشغيل. وله الأولوية على `motion`.
`corners`مُدخَل	`NuiCorners`		شكل زواياه: `round` أو `squircle` أو `bevel` أو `scoop` أو `notch` أو `square`.
`radius`مُدخَل	`NuiRadius`		حجم زواياه: `none` أو `small` أو `medium` أو `large` أو `full`.
`density`مُدخَل	`NuiDensity`		المساحة التي يشغلها: `compact` أو `regular` أو `roomy`.
`openChange`مُخرَج	`boolean`		يُطلَق عند ظهورها أو إغلاقها.
`show`دالة	`(anchor: HTMLElement) => void`		يُظهرها بجوار أي عنصر.
`hide`دالة	`() => void`		يُخفيها.

مُدخلات التخصيص التي تتركها دون ضبط تتبع أقرب سمة data-nui-*. راجع دليل التخصيص.

NuiHovercardTrigger

يُظهر بطاقة التحويم عند تمرير المؤشر وعند التركيز بلوحة المفاتيح، ويجعلها وصفًا لهذا العنصر.

المُحدِّد: [nuiHovercardTrigger]

NuiHovercardTrigger: الخصائص
الاسم	النوع	القيمة الافتراضية	الوصف
`nuiHovercardTrigger`مُدخَل	`NuiHovercard`		بطاقة التحويم المراد إظهارها.