Needless UI

کامپوننت‌ها

Popover

پنل‌های شناور کنار یک دکمه، و تول‌تیپ‌های غنی با بردن نشانگر.

ایمپورت

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

NuiPopover

یک popover بومی که کنار عنصری که بازش کرده قرار می‌گیرد.

سلکتور
[nuiPopover]
نام اکسپورت
nuiPopover
نامنوعپیش‌فرضتوضیح
sideورودی'top' | 'bottom' | 'start' | 'end''bottom'سمتی از تریگر که روی آن باز می‌شود. اگر جا نباشد، به سمت مقابل می‌رود.
alignورودی'start' | 'center' | 'end''start'نحوهٔ هم‌ترازی‌اش با تریگر در امتداد همان سمت.
offsetورودیnumber8فاصلهٔ تریگر تا پنل، به پیکسل.
arrowورودیbooleanfalseفلشی نشان می‌دهد که به تریگر اشاره می‌کند.
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

دکمه‌ای که یک popover را با popovertarget بومی باز و بسته می‌کند.

سلکتور
button[nuiPopoverTrigger]
نامنوعپیش‌فرضتوضیح
nuiPopoverTriggerورودیNuiPopoverمشخص می‌کند کدام popover باز شود.

NuiHovercard

تول‌تیپی غنی که تریگرش را توصیف می‌کند.

سلکتور
[nuiHovercard]
نام اکسپورت
nuiHovercard
نامنوعپیش‌فرضتوضیح
sideورودی'top' | 'bottom' | 'start' | 'end''bottom'سمتی از تریگر که روی آن باز می‌شود. اگر جا نباشد، به سمت مقابل می‌رود.
alignورودی'start' | 'center' | 'end''start'نحوهٔ هم‌ترازی‌اش با تریگر در امتداد همان سمت.
offsetورودیnumber8فاصلهٔ تریگر تا کارت، به پیکسل.
arrowورودیbooleanfalseفلشی نشان می‌دهد که به تریگر اشاره می‌کند.
openDelayورودیnumber500چند میلی‌ثانیه نگه داشتن نشانگر پیش از باز شدن. فوکوس صفحه‌کلید آن را بلافاصله باز می‌کند.
closeDelayورودیnumber300چند میلی‌ثانیه پس از رفتن نشانگر، پیش از بسته شدن.
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

با بردن نشانگر و با فوکوس صفحه‌کلید یک hovercard نشان می‌دهد و آن را توضیح این عنصر قرار می‌دهد.

سلکتور
[nuiHovercardTrigger]
نامنوعپیش‌فرضتوضیح
nuiHovercardTriggerورودیNuiHovercardمشخص می‌کند کدام hovercard نشان داده شود.