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`Input	`boolean`	`true`	Открывает диалог как модальный: с подложкой, а страница за ним становится инертной.
`dismissible`Input	`boolean`	`true`	Закрывают ли диалог нажатие Esc и клик по подложке.
`size`Input	`'sm' \| 'md' \| 'lg'`	`'md'`	Максимальная ширина: `sm` (24rem), `md` (32rem) или `lg` (44rem).
`enter`Input	`NuiEnter`		Как компонент появляется: `zoom`, `fade`, `drop`, `rise`, `unfold`, `flip`, `swing`, `slide` или `none`.
`motion`Input	`NuiMotion`		Пружина, задающая движение компонента: `snappy`, `bouncy`, `jelly`, `elastic`, `lazy`, `mechanical` или `none`.
`spring`Input	`NuiSpring`		Произвольная пружина в виде `{ stiffness, damping, mass }`, которая компилируется в CSS во время выполнения. Переопределяет `motion`.
`corners`Input	`NuiCorners`		Форма углов: `round`, `squircle`, `bevel`, `scoop`, `notch` или `square`.
`radius`Input	`NuiRadius`		Радиус скругления углов: `none`, `small`, `medium`, `large` или `full`.
`density`Input	`NuiDensity`		Сколько места занимает компонент: `compact`, `regular` или `roomy`.
`closed`Output	`string`		Передаёт возвращаемое значение при каждом закрытии диалога. Если диалог закрыли без выбора, значение пустое.
`close`Метод	`(returnValue?: string) => void`		Закрывает диалог с необязательным возвращаемым значением.

Если входное свойство настройки не задано, компонент берёт его значение из ближайшего атрибута data-nui-*. Подробнее — в руководстве по настройке.

NuiDialogTitle

Заголовок диалога. Получает id и становится значением aria-labelledby диалога.

Селектор: [nuiDialogTitle]

NuiDialogDescription

Краткое описание, на которое ссылается aria-describedby диалога.

Селектор: [nuiDialogDescription]

NuiDialogActions

Ряд кнопок в нижней части диалога, прижатый к концу строки.

Селектор: [nuiDialogActions]

NuiDialogClose

По клику закрывает диалог, внутри которого находится.

Селектор: [nuiDialogClose]

NuiDialogClose: Свойства
Имя	Тип	По умолчанию	Описание
`nuiDialogClose`Input	`string`	`''`	Значение, с которым закрывается диалог; его передаёт `(closed)`.