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

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

Context dialogs can be placed on dark backgrounds.

´ 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 DarkContextDialogExampleComponent { } // 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 DarkContextDialogExampleComponent { } // 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.

´ 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 PrevFocusContextDialogExampleComponent { @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 PrevFocusContextDialogExampleComponent { @ViewChild('focusme', { static: true }) focusMe: DtButton; @ViewChild('contextdialog', { static: true }) contextdialog: DtContextDialog; open(): void { this.contextdialog.open(); } }
´ 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 DefaultContextDialogExampleComponent {} <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 DefaultContextDialogExampleComponent {}

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.

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.

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 PrevFocusContextDialogExampleComponent { @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 PrevFocusContextDialogExampleComponent { @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 CustomIconContextDialogExampleComponent { } <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 CustomIconContextDialogExampleComponent { }

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

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 DarkContextDialogExampleComponent { } // 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 DarkContextDialogExampleComponent { } // 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 InteractiveContextDialogExampleComponent { 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 InteractiveContextDialogExampleComponent { interactiveDialogDisabled = false; customTrigger = false; }