API کامپوننت Dialog

ایمپورت

import-dialog.ts

import {
  NuiDialog,
  NuiDialogActions,
  NuiDialogClose,
  NuiDialogDescription,
  NuiDialogTitle,
} from '@needless-ui/angular/dialog';

NuiDialog

یک <dialog> بومی را به دیالوگ Needless UI تبدیل می‌کند.

سلکتور: dialog[nuiDialog]
نام اکسپورت: nuiDialog

NuiDialog: ویژگی‌ها
نام	نوع	پیش‌فرض	توضیح
`open`دوطرفه	`boolean`	`false`	اینکه دیالوگ باز است یا نه. آن را با `[(open)]` متصل کنید.
`modal`ورودی	`boolean`	`true`	دیالوگ را به‌صورت مودال باز می‌کند، با یک پس‌زمینه و صفحه‌ای غیرفعال (inert) در پشت آن.
`dismissible`ورودی	`boolean`	`true`	اینکه Esc و کلیک روی پس‌زمینه دیالوگ را ببندند یا نه.
`size`ورودی	`'sm' \| 'md' \| 'lg'`	`'md'`	حداکثر عرض: `sm` (24rem)، `md` (32rem) یا `lg` (44rem).
`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`.
`closed`خروجی	`string`		هر بار که دیالوگ بسته می‌شود، مقدار بازگشتی را منتشر می‌کند. اگر دیالوگ بدون انتخاب بسته شده باشد، این مقدار خالی است.
`close`متد	`(returnValue?: string) => void`		دیالوگ را با یک مقدار بازگشتی اختیاری می‌بندد.

ورودی‌های سفارشی‌سازی که تنظیمشان نکنید، از نزدیک‌ترین اتریبیوت data-nui-* پیروی می‌کنند. راهنمای سفارشی‌سازی را ببینید.

NuiDialogTitle

عنوان دیالوگ. یک id می‌گیرد و به aria-labelledby دیالوگ تبدیل می‌شود.

سلکتور: [nuiDialogTitle]

NuiDialogDescription

توضیحی کوتاه که aria-describedby دیالوگ به آن ارجاع می‌دهد.

سلکتور: [nuiDialogDescription]

NuiDialogActions

ردیفی از دکمه‌ها در پایین دیالوگ، چیده‌شده در انتهای سطر.

سلکتور: [nuiDialogActions]

NuiDialogClose

با کلیک، دیالوگی را که درون آن قرار دارد می‌بندد.

سلکتور: [nuiDialogClose]

NuiDialogClose: ویژگی‌ها
نام	نوع	پیش‌فرض	توضیح
`nuiDialogClose`ورودی	`string`	`''`	مقداری که دیالوگ با آن بسته می‌شود و `(closed)` آن را منتشر می‌کند.