CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Interface

DialogDefinition (ui/dialog)

@ckeditor/ckeditor5-ui/src/dialog/dialog

interface
See source

The definition that describes a dialog window and its content. Passed to the show method.

Filtering

Properties

  • actionButtons : Array<DialogActionButtonDefinition> | undefined

    See source

    The action buttons displayed in the dialog's footer.

  • className : string | undefined

    See source

    An additional CSS class set on the outermost (.ck.ck-dialog) container element allowing for visual customization.

  • content : View<HTMLElement> | Array<View<HTMLElement>> | undefined

    See source

    The content of the dialog. It can be a single View or an array of views.

  • hasCloseButton : boolean | undefined

    See source

    A flag indicating whether the dialog should have a close button in the header. true by default. Works when title is also set and the header is displayed.

    Note: If you hide the close button, make sure that the dialog can be closed in another way.

  • icon : string | undefined

    See source

    The SVG string of an icon displayed in dialogs's header. Used only when title is also set and the header is displayed.

    See more in content.

  • id : string

    See source

    A unique identifier of the dialog. It allows for distinguishing between different dialogs and their visibility. For instance, when open, the ID of the currently visible dialog is stored in id.

    The id is also passed along the DialogShowEvent and DialogHideEvent events.

  • isModal : boolean | undefined

    See source

    When set to true, the dialog will become a modal, that is, it will block the UI until it is closed.

  • onHide : ( Dialog ) => void | undefined

    See source

    A callback called when the dialog hides with a low priority. It allows for cleaning up (for example, resetting) the dialog's content.

  • onShow : ( Dialog ) => void | undefined

    See source

    A callback called when the dialog shows up with a low priority. It allows for setting up the dialog's content.

  • position : 'screen-center' | 'editor-center' | 'editor-top-side' | 'editor-top-center' | 'editor-bottom-center' | 'editor-above-center' | 'editor-below-center' | undefined

    See source

    Available dialog positions. By default DialogViewPosition.EDITOR_CENTER is used for non-modals and DialogViewPosition.SCREEN_CENTER for modals.

    Learn more about available positions.

  • title : string | undefined

    See source

    A title displayed in the dialogs's header. It also works as an accessible name of the dialog used by assistive technologies.

    When not set, the header is not displayed. Affects icon and hasCloseButton.