Dialog
The kit's modal dialog, nol-dialog: a title that ends with a Close button at the top right, a body of the content projected into it, and a row of the elements marked nolDialogAction, left out when there are none. A large dialog's title bar ends with the elements marked nolDialogControl, then Maximize, which toggles it between its large size and the whole window for as long as it is open and reads Restore while it is maximized, and then Close. It is the root of a component opened with DialogService.open, which names the dialog by its title and supplies DialogTokens.titleId; created anywhere else it fails for want of that token. It never closes itself: Escape, unless a control inside already handled it, and the Close button ask its owner through DialogComponent.dismissed, and a click on the backdrop does nothing. It opens centered in the overlay bounds each time, and the primary pointer button moves it by its title bar, away from the bar's buttons, within those bounds, where it stays as the window resizes; Escape during the drag puts it back where the drag began. A maximized dialog doesn't move, and Restore puts it back where it was moved.
Examples
Loading…
States
Loading…
API
Selector nol-dialog
Import from @noldova/ui.components.angular
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
title | string | Required | The dialog's title, which is also its accessible name. A normal dialog's title wraps; a large dialog's stays on one line and ends with an ellipsis when it does not fit. |
size | DialogSize | DialogSize.Normal | The dialog's size; normal when not bound. A normal dialog takes its preferred width within the window and scrolls its body; a large one takes most of the window, with a title bar that ends with its controls, Maximize and Close, and a body without padding that lays itself out. |
Outputs
| Name | Type | Description |
|---|---|---|
dismissed | void | Emits when the person asks to dismiss the dialog, by Escape or by its Close button. The owner closes the dialog, or keeps it open. |
Accessibility
| Key | Action |
|---|---|
| Tab | Moves to the dialog's next control, and from its last back to its first: the focus stays in the dialog while it is open. |
| Shift+Tab | Moves to the dialog's previous control, and from its first to its last. |
| Escape | Asks the dialog's owner to close it, unless a control inside already handled the key; once it closes, the focus goes back to the control that opened it. |
The dialog has the dialog role and aria-modal="true", and is named by its title through aria-labelledby; while it is open, the page behind it is inert.
An element marked nolDialogDescription, such as the line that says what an answer does, describes the dialog through aria-describedby, so a screen reader reads it with the title as the dialog opens.
The dialog first focuses Close, or the control its owner names, such as Cancel before a change that can't be undone; its focus ring shows only when a key opened the dialog.
Close, Maximize and Restore are icon buttons named by their labels, each with a tooltip; the buttons that open these dialogs are marked aria-haspopup="dialog".
Specification
Loading…