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.

<dt-context-dialog
  aria-label="Show more details"
  ariaLabelClose="Close context dialog"
>
  <p>Your dashboard "real user monitoring" is only visible to you</p>
</dt-context-dialog>

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.
ariaLabelClose 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
openedChange 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

Configuration options

If your use case requires a different configuration of the overlay e.g. setting your own maxWidth, it can be configured using the DT_CONTEXT_DIALOG_CONFIG injection token. Only the settings you provide will be overwritten, the others will fall back to the default configuration.

In order to have a context-dialog that has no max-width set please provide a the DT_CONTEXT_DIALOG_CONFIG with the maxWidth property specifically set to undefined. This is necessary to have a defaultValue but still be able to override it in cases where the user does not want to have a maxWidth assigned to the overlay.

[{ provide: DT_CONTEXT_DIALOG_CONFIG, useValue: { maxWidth: undefined } }];

Accessibility

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

States

It is possible to disable the entire context dialog.

<div>
  <button
    *ngIf="customTrigger"
    dt-icon-button
    [dtContextDialogTrigger]="interactiveDialog"
    [disabled]="interactiveDialogDisabled"
    variant="secondary"
    aria-label="Open context dialog"
  >
    <dt-icon name="user-uem"></dt-icon>
  </button>
  <dt-context-dialog
    #interactiveDialog
    [disabled]="interactiveDialogDisabled"
    aria-label="Show more details"
    ariaLabelClose="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>

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.

<button dt-button variant="secondary" (click)="open()" #focusme>Open</button>
<dt-context-dialog
  color="cta"
  aria-label="Show more details"
  ariaLabelClose="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>

Dark background

The context dialog component can be used on dark background.

<div class="dt-example-dark" dtTheme=":dark">
  <dt-context-dialog
    aria-label="Show more actions"
    ariaLabelClose="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="user-uem"></dt-icon>
  </button>
  <dt-context-dialog
    #darkIcondialog
    aria-label="Open context dialog"
    ariaLabelClose="Close context dialog"
  >
    <p>
      Your dashboard "real user monitoring"
      <br />
      is only visible to you
    </p>
  </dt-context-dialog>
</div>

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.

<div class="dt-demo-card">
  <dt-card>
    <dt-card-title>Top 3 JavaScript errors</dt-card-title>
    <dt-card-subtitle>Some subtitle</dt-card-subtitle>
    <dt-card-title-actions>
      <dt-context-dialog
        aria-label="Show more actions"
        ariaLabelClose="Close context dialog"
      >
        <button dt-button variant="secondary">First button</button>
        <button dt-button variant="secondary">Second button</button>
        <button dt-button variant="secondary">Third button</button>
      </dt-context-dialog>
    </dt-card-title-actions>
    The card is not an interactive element, therefore there are no hover, active
    or disabled states.
  </dt-card>
</div>

Context dialog with custom trigger

To add a custom trigger you can add the [dtContextDialogTrigger] directive to any <dt-button> to be able to link it to the correct context dialog.

<button
  dt-icon-button
  [dtContextDialogTrigger]="dialog"
  aria-label="Open context dialog"
>
  <dt-icon name="user-uem"></dt-icon>
</button>
<dt-context-dialog
  #dialog
  aria-label="Open context dialog"
  ariaLabelClose="Close context dialog"
>
  <p>
    Your dashboard "real user monitoring"
    <br />
    is only visible to you
  </p>
</dt-context-dialog>

Context dialog with a header

<dt-context-dialog
  aria-label="Show more actions"
  ariaLabelClose="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>
 
<dt-context-dialog
  aria-label="Show more actions"
  ariaLabelClose="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>
  <p>Your dashboard "real user monitoring" is only visible to you</p>
  <p>Your dashboard "real user monitoring" is only visible to you</p>
  <p>Your dashboard "real user monitoring" is only visible to you</p>
  <p>Your dashboard "real user monitoring" is only visible to you</p>
  <p>Your dashboard "real user monitoring" is only visible to you</p>
  <p>Your dashboard "real user monitoring" is only visible to you</p>
  <p>Your dashboard "real user monitoring" is only visible to you</p>
  <p>Your dashboard "real user monitoring" is only visible to you</p>
  <p>Your dashboard "real user monitoring" is only visible to you</p>
  <p>Your dashboard "real user monitoring" is only visible to you</p>
  <p>Your dashboard "real user monitoring" is only visible to you</p>
  <p>Your dashboard "real user monitoring" is only visible to you</p>
  <p>Your dashboard "real user monitoring" is only visible to you</p>
  <p>Your dashboard "real user monitoring" is only visible to you</p>
  <p>Your dashboard "real user monitoring" is only visible to you</p>
  <p>Your dashboard "real user monitoring" is only visible to you</p>
  <dt-context-dialog-footer>
    <p>This is some footer text.</p>
    <button dt-button variant="secondary">One button</button>
  </dt-context-dialog-footer>
</dt-context-dialog>