Context dialog

The context dialog is an overlay which appears on click of a button.

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 {}

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 undefined ARIA label of the context dialog trigger button.
aria-labelledby string undefined ARIA reference to a label describing the context-dialog.
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

To make our components accessible it is obligatory to provide either an aria-label or aria-labelledby.

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.

States

It is possible to disable the entire context dialog.

´ 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; }

Behavior

As soon as the context dialog is open, the focus is set on the first interactive element within the dialog. The context dialog traps the focus inside the overlay. When it is closed again, 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(); } }

Dark background

The context dialog component can be used 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

Context dialog in use

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 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 {}