Reference Source
import {Dialog} from '@adobe/coral-spectrum'
public class | source

Dialog

Expression Extends:

class Dialog extends BaseOverlay(BaseComponent(HTMLElement))

A Dialog component that supports various use cases with custom content. The Dialog can be given a size by using the special attribute [coral-dialog-size] as selector.

See:

Example:

Markup
<coral-dialog></coral-dialog>
JS constructor
new Coral.Dialog();

Static Member Summary

Static Public Members
public static

Returns Dialog backdrops.

public static

Returns Dialog close options.

public static

Returns Dialog interaction options.

public static

Returns Dialog variants.

Member Summary

Public Members
public

The backdrop configuration for this dialog.

public

Whether the dialog should have a close button.

public

The dialog content element.

public

The dialog footer element.

public

Whether the dialog should be displayed full screen (without borders or margin).

public

The dialog header element.

public

The dialog's icon.

  • "" by default.

public

Whether keyboard interaction is enabled.

public

Whether the dialog can moved around by dragging the title.

public

open: *

Inherited from BaseOverlay#open.

public
public

The dialog's variant. See DialogVariantEnum.

  • DialogVariantEnum.DEFAULT by default.
  • reflected

Method Summary

Public Methods
public

Centers the dialog in the middle of the screen.

Static Public Members

public static backdrop: DialogBackdropEnum: * source

Returns Dialog backdrops.

public static closable: DialogClosableEnum: * source

Returns Dialog close options.

public static interaction: DialogInteractionEnum: * source

Returns Dialog interaction options.

public static variant: DialogVariantEnum: * source

Returns Dialog variants.

Public Members

public backdrop: String source

The backdrop configuration for this dialog. See DialogBackdropEnum.

  • DialogBackdropEnum.MODAL by default.

public closable: String source

Whether the dialog should have a close button. See DialogClosableEnum.

  • DialogClosableEnum.OFF by default.
  • reflected

public content: DialogContent source

The dialog content element.

  • content-zone

The dialog footer element.

  • content-zone

public fullscreen: Boolean source

Whether the dialog should be displayed full screen (without borders or margin).

  • false by default.
  • reflected

public header: DialogHeader source

The dialog header element.

  • content-zone

public icon: String source

The dialog's icon.

  • "" by default.

public interaction: DialogInteractionEnum source

Whether keyboard interaction is enabled. See DialogInteractionEnum.

  • DialogInteractionEnum.ON by default.

public movable: Boolean source

Whether the dialog can moved around by dragging the title.

  • false by default.
  • reflected

public open: * source

Inherited from BaseOverlay#open.

public trackingElement: * source

Inherited from BaseComponent#trackingElement.

public variant: String source

The dialog's variant. See DialogVariantEnum.

  • DialogVariantEnum.DEFAULT by default.
  • reflected

Public Methods

public center(): Dialog source

Centers the dialog in the middle of the screen.

Return:

Dialog

this, chainable.