Context dialog

The context dialog is an overlay which appears on click of a button. It holds context related actions and contains other components like buttons, links, checkboxes, etc.

´ Loading interactive demo...
<dt-context-dialog aria-label="Show more details" aria-label-close-button="Close context dialog" > <p>Your dashboard "real user monitoring" is only visible to you</p> </dt-context-dialog> export class ContextDialogDefaultExample {} <dt-context-dialog aria-label="Show more details" aria-label-close-button="Close context dialog" > <p>Your dashboard "real user monitoring" is only visible to you</p> </dt-context-dialog> export class ContextDialogDefaultExample {}

Variants

Context actions menu

The context actions menu is a variant of the context dialog placed on the top right within a card, containing secondary buttons.

Context dialog example

Context dialog on dark background

´ Loading interactive demo...
<div class="dark" dtTheme=":dark"> <dt-context-dialog aria-label="Show more actions" aria-label-close-button="Close context dialog" > <button dt-button variant="secondary">Edit</button> </dt-context-dialog> <button dt-icon-button [dtContextDialogTrigger]="darkIcondialog" variant="secondary" aria-label="Open context dialog" > <dt-icon name="agent"></dt-icon> </button> <dt-context-dialog #darkIcondialog aria-label="Open context dialog" aria-label-close-button="Close context dialog" > <p> Your dashboard "real user monitoring" <br /> is only visible to you </p> </dt-context-dialog> </div> export class ContextDialogDarkExample {} // tslint:enable:max-line-length <div class="dark" dtTheme=":dark"> <dt-context-dialog aria-label="Show more actions" aria-label-close-button="Close context dialog" > <button dt-button variant="secondary">Edit</button> </dt-context-dialog> <button dt-icon-button [dtContextDialogTrigger]="darkIcondialog" variant="secondary" aria-label="Open context dialog" > <dt-icon name="agent"></dt-icon> </button> <dt-context-dialog #darkIcondialog aria-label="Open context dialog" aria-label-close-button="Close context dialog" > <p> Your dashboard "real user monitoring" <br /> is only visible to you </p> </dt-context-dialog> </div> export class ContextDialogDarkExample {} // tslint:enable:max-line-length

Behavior

As soon as the context dialog is open, the focus is set on the first interactive element within the dialog. The focus should be trapped inside the context-dialog. On blur, the context dialog closes and the focus is set to the previously focused element. The dialog can be opened via "ENTER" or "SPACE" when focused, "ESC" closes it.

´ Loading interactive demo...
<button dt-button variant="secondary" (click)="open()" #focusme> Open </button> <dt-context-dialog #contextdialog color="cta" aria-label="Show more details" aria-label-close-button="Close context dialog" > <p>Close me to return the focus to the "Open" button</p> <button dt-button variant="secondary">Focused</button> </dt-context-dialog> export class ContextDialogPreviousFocusExample { @ViewChild('focusme', { static: true }) focusMe: DtButton; @ViewChild('contextdialog', { static: true }) contextdialog: DtContextDialog; open(): void { this.contextdialog.open(); } } <button dt-button variant="secondary" (click)="open()" #focusme> Open </button> <dt-context-dialog #contextdialog color="cta" aria-label="Show more details" aria-label-close-button="Close context dialog" > <p>Close me to return the focus to the "Open" button</p> <button dt-button variant="secondary">Focused</button> </dt-context-dialog> export class ContextDialogPreviousFocusExample { @ViewChild('focusme', { static: true }) focusMe: DtButton; @ViewChild('contextdialog', { static: true }) contextdialog: DtContextDialog; open(): void { this.contextdialog.open(); } }

The <dt-context-dialog> creates a container that is hidden inside an overlay. It is possible to disable the entire context dialog. The context dialog traps the focus inside the overlay until it is closed again. It sets the focus to the previously focused element when closed. The closing button inside the context dialog will get the focus, when the context menu is opened.

´ Loading interactive demo...
<dt-context-dialog aria-label="Show more details" aria-label-close-button="Close context dialog" > <p>Your dashboard "real user monitoring" is only visible to you</p> </dt-context-dialog> export class ContextDialogDefaultExample {} <dt-context-dialog aria-label="Show more details" aria-label-close-button="Close context dialog" > <p>Your dashboard "real user monitoring" is only visible to you</p> </dt-context-dialog> export class ContextDialogDefaultExample {}

Imports

You have to import the DtContextDialogModule when you want to use the <dt-context-dialog>:

@NgModule({
  imports: [DtContextDialogModule],
})
class MyModule {}

Inputs

Name Type Default Description
tabIndex number 0 Gets and sets the tabIndex on the context dialog. Inherited by mixinTabIndex.
disabled boolean false Gets and sets the disabled property on the context dialog. Inherited by mixinDisabled.
aria-label string ARIA label of the context dialog trigger button.
aria-label-close-button string ARIA label of the context dialog close button.
overlayPanelClass string | string[] | Set<string> | { [key: string]: any } Custom css classes to add to the overlay panel element. Can be used to scope styling within the overlay

Properties

Name Type Description
isPanelOpen boolean Returns wether or not the panel is open.

Outputs

Name Type Description
openedChanged EventEmitter<boolean> Event emitted when the context dialog opens or closes.

Methods

Name Description Return value
open() Opens the context dialog. void
close() Closes the context dialog. void
focus() Focuses the context dialog. void

Accessibility

Context dialogs should be given a meaningful label via aria-label for the open trigger and via aria-label-close-button for the close trigger, because the buttons do not contain text.

Examples

Focus previously focused element on close

To show the previous focused element working - please use the button labeled "Open" and not the button with the icon to open the context dialog

´ Loading interactive demo...
<button dt-button variant="secondary" (click)="open()" #focusme> Open </button> <dt-context-dialog #contextdialog color="cta" aria-label="Show more details" aria-label-close-button="Close context dialog" > <p>Close me to return the focus to the "Open" button</p> <button dt-button variant="secondary">Focused</button> </dt-context-dialog> export class ContextDialogPreviousFocusExample { @ViewChild('focusme', { static: true }) focusMe: DtButton; @ViewChild('contextdialog', { static: true }) contextdialog: DtContextDialog; open(): void { this.contextdialog.open(); } } <button dt-button variant="secondary" (click)="open()" #focusme> Open </button> <dt-context-dialog #contextdialog color="cta" aria-label="Show more details" aria-label-close-button="Close context dialog" > <p>Close me to return the focus to the "Open" button</p> <button dt-button variant="secondary">Focused</button> </dt-context-dialog> export class ContextDialogPreviousFocusExample { @ViewChild('focusme', { static: true }) focusMe: DtButton; @ViewChild('contextdialog', { static: true }) contextdialog: DtContextDialog; open(): void { this.contextdialog.open(); } }

Context dialog with custom icon

To add a custom icon use the <dt-button dt-icon-button></dt-button> component and add the directive [dtContextDialogTrigger] to be able to link it to the correct context dialog.

´ Loading interactive demo...
<button dt-icon-button [dtContextDialogTrigger]="dialog" aria-label="Open context dialog" > <dt-icon name="agent"></dt-icon> </button> <dt-context-dialog #dialog aria-label="Open context dialog" aria-label-close-button="Close context dialog" > <p> Your dashboard "real user monitoring" <br /> is only visible to you </p> </dt-context-dialog> export class ContextDialogCustomIconExample {} <button dt-icon-button [dtContextDialogTrigger]="dialog" aria-label="Open context dialog" > <dt-icon name="agent"></dt-icon> </button> <dt-context-dialog #dialog aria-label="Open context dialog" aria-label-close-button="Close context dialog" > <p> Your dashboard "real user monitoring" <br /> is only visible to you </p> </dt-context-dialog> export class ContextDialogCustomIconExample {}

Context dialog with a header

´ Loading interactive demo...
<dt-context-dialog aria-label="Show more actions" aria-label-close-button="Close context dialog" > <dt-context-dialog-header> <dt-context-dialog-header-title>Analyse</dt-context-dialog-header-title> Today, 12:03 - 14:08 </dt-context-dialog-header> <p>Your dashboard "real user monitoring" is only visible to you</p> </dt-context-dialog> export class ContextDialogHeaderExample {} <dt-context-dialog aria-label="Show more actions" aria-label-close-button="Close context dialog" > <dt-context-dialog-header> <dt-context-dialog-header-title>Analyse</dt-context-dialog-header-title> Today, 12:03 - 14:08 </dt-context-dialog-header> <p>Your dashboard "real user monitoring" is only visible to you</p> </dt-context-dialog> export class ContextDialogHeaderExample {}

Context dialog on dark background

´ Loading interactive demo...
<div class="dark" dtTheme=":dark"> <dt-context-dialog aria-label="Show more actions" aria-label-close-button="Close context dialog" > <button dt-button variant="secondary">Edit</button> </dt-context-dialog> <button dt-icon-button [dtContextDialogTrigger]="darkIcondialog" variant="secondary" aria-label="Open context dialog" > <dt-icon name="agent"></dt-icon> </button> <dt-context-dialog #darkIcondialog aria-label="Open context dialog" aria-label-close-button="Close context dialog" > <p> Your dashboard "real user monitoring" <br /> is only visible to you </p> </dt-context-dialog> </div> export class ContextDialogDarkExample {} // tslint:enable:max-line-length <div class="dark" dtTheme=":dark"> <dt-context-dialog aria-label="Show more actions" aria-label-close-button="Close context dialog" > <button dt-button variant="secondary">Edit</button> </dt-context-dialog> <button dt-icon-button [dtContextDialogTrigger]="darkIcondialog" variant="secondary" aria-label="Open context dialog" > <dt-icon name="agent"></dt-icon> </button> <dt-context-dialog #darkIcondialog aria-label="Open context dialog" aria-label-close-button="Close context dialog" > <p> Your dashboard "real user monitoring" <br /> is only visible to you </p> </dt-context-dialog> </div> export class ContextDialogDarkExample {} // tslint:enable:max-line-length

Interactive

´ Loading interactive demo...
<div> <button *ngIf="customTrigger" dt-icon-button [dtContextDialogTrigger]="interactiveDialog" [disabled]="interactiveDialogDisabled" variant="secondary" aria-label="Open context dialog" > <dt-icon name="agent"></dt-icon> </button> <dt-context-dialog #interactiveDialog [disabled]="interactiveDialogDisabled" aria-label="Show more details" aria-label-close-button="Close context dialog" > <p> Your dashboard "real user monitoring" <br /> is only visible to you </p> </dt-context-dialog> </div> <button dt-button (click)="interactiveDialog.open()">Open</button> <button dt-button (click)="interactiveDialog.close()">Close</button> <button dt-button (click)="interactiveDialogDisabled = !interactiveDialogDisabled" > Disabled / Enable </button> <button dt-button (click)="customTrigger = !customTrigger"> Toggle custom trigger </button> export class ContextDialogInteractiveExample { interactiveDialogDisabled = false; customTrigger = false; } <div> <button *ngIf="customTrigger" dt-icon-button [dtContextDialogTrigger]="interactiveDialog" [disabled]="interactiveDialogDisabled" variant="secondary" aria-label="Open context dialog" > <dt-icon name="agent"></dt-icon> </button> <dt-context-dialog #interactiveDialog [disabled]="interactiveDialogDisabled" aria-label="Show more details" aria-label-close-button="Close context dialog" > <p> Your dashboard "real user monitoring" <br /> is only visible to you </p> </dt-context-dialog> </div> <button dt-button (click)="interactiveDialog.open()">Open</button> <button dt-button (click)="interactiveDialog.close()">Close</button> <button dt-button (click)="interactiveDialogDisabled = !interactiveDialogDisabled" > Disabled / Enable </button> <button dt-button (click)="customTrigger = !customTrigger"> Toggle custom trigger </button> export class ContextDialogInteractiveExample { interactiveDialogDisabled = false; customTrigger = false; }