Dialog API · Needless UI

Import

import-dialog.ts

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

Turns a native <dialog> into a Needless UI dialog.

NuiDialog: Properties
Name	Type	Default	Description
`open`Two-way	`boolean`	`false`	Whether the dialog is open. Bind it with `[(open)]`.
`modal`Input	`boolean`	`true`	Opens as a modal, with a backdrop and an inert page behind it.
`dismissible`Input	`boolean`	`true`	Whether Escape and backdrop clicks close the dialog.
`size`Input	`'sm' \| 'md' \| 'lg'`	`'md'`	Maximum width: `sm` (24rem), `md` (32rem) or `lg` (44rem).
`enter`Input	`NuiEnter`		How it arrives: `zoom`, `fade`, `drop`, `rise`, `unfold`, `flip`, `swing`, `slide` or `none`.
`motion`Input	`NuiMotion`		The spring it moves with: `snappy`, `bouncy`, `jelly`, `elastic`, `lazy`, `mechanical` or `none`.
`spring`Input	`NuiSpring`		Any spring, as `{ stiffness, damping, mass }`, compiled to CSS at runtime. It overrides `motion`.
`corners`Input	`NuiCorners`		The shape of its corners: `round`, `squircle`, `bevel`, `scoop`, `notch` or `square`.
`radius`Input	`NuiRadius`		How big its corners are: `none`, `small`, `medium`, `large` or `full`.
`density`Input	`NuiDensity`		How much room it takes: `compact`, `regular` or `roomy`.
`closed`Output	`string`		Emits the return value each time the dialog closes. It’s empty when the dialog was dismissed.
`close`Method	`(returnValue?: string) => void`		Closes the dialog with an optional return value.

Customization inputs you leave unset follow the nearest data-nui-* attribute. See the customization guide.

The dialog’s title. It gets an id and becomes the dialog’s aria-labelledby.

A short description, referenced by the dialog’s aria-describedby.

A row of buttons at the bottom of the dialog, aligned to the end.

Closes the surrounding dialog when clicked.

NuiDialogClose: Properties
Name	Type	Default	Description
`nuiDialogClose`Input	`string`	`''`	The value the dialog closes with, emitted by `(closed)`.