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 #dialog> <p>Your dashboard "real user monitoring"<br> is only visible to you</p> </dt-context-dialog> export class DefaultContextDialogExampleComponent {}

Your dashboard "real user monitoring"
is only visible to you

export class DefaultContextDialogExampleComponent {}

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.

Animation

The context actions menu is not animated at all.

Variants

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

´ Loading interactive demo...
<dt-context-dialog #dialog> <p>Your dashboard "real user monitoring"<br> is only visible to you</p> </dt-context-dialog> export class DefaultContextDialogExampleComponent {}

Your dashboard "real user monitoring"
is only visible to you

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

Accessibility

Context dialogs should be given a meaningful label via aria-label, because the button does not have a text.

Options & Properties

Name Type Default Description
@Input() tabIndex number 0 Gets and sets the tabIndex on the context dialog. Inherited by mixinTabIndex
@Input() disabled boolean false Gets and sets the disabled property on the context dialog. Inherited by mixinDisabled
@Input() aria-label string Aria label of the context dialog trigger button.
@Ouput() openedChanged EventEmitter<boolean> Event emitted when the context dialog opens or closes.
isPanelOpen boolean Returns wether or not the panel is open

Methods

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

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"> <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') focusMe: DtButton; @ViewChild('contextdialog') contextdialog: DtContextDialog; open(): void { this.contextdialog.open(); } }

Close me to return the focus to the "Open" button

export class PrevFocusContextDialogExampleComponent { @ViewChild('focusme') focusMe: DtButton; @ViewChild('contextdialog') 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"><dt-icon name="agent"></dt-icon></button> <dt-context-dialog #dialog> <p>Your dashboard "real user monitoring"<br> is only visible to you</p> </dt-context-dialog> export class CustomIconContextDialogExampleComponent { }

Your dashboard "real user monitoring"
is only visible to you

export class CustomIconContextDialogExampleComponent { }

Context dialog on dark background

´ Loading interactive demo...
<div class="dark" dtTheme=":dark"> <dt-context-dialog> <button dt-button variant="secondary">Edit</button> </dt-context-dialog> <button dt-icon-button [dtContextDialogTrigger]="darkIcondialog" variant="secondary"><dt-icon name="agent"></dt-icon></button> <dt-context-dialog #darkIcondialog> <p>Your dashboard "real user monitoring"<br> is only visible to you</p> </dt-context-dialog> </div> export class DarkContextDialogExampleComponent { }

Your dashboard "real user monitoring"
is only visible to you

export class DarkContextDialogExampleComponent { }

Interactive

´ Loading interactive demo...
<div> <button *ngIf="customTrigger" dt-icon-button [dtContextDialogTrigger]="interactiveDialog" [disabled]="interactiveDialogDisabled" variant="secondary"> <dt-icon name="agent"></dt-icon> </button> <dt-context-dialog #interactiveDialog [disabled]="interactiveDialogDisabled"> <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; }

Your dashboard "real user monitoring"
is only visible to you

export class InteractiveContextDialogExampleComponent { interactiveDialogDisabled = false; customTrigger = false; }