A modal dialog component built on the native <dialog> element.
The dialog traps focus while open and blocks interaction with the rest of the page (modal semantics). It supports animated open/close transitions, an optional backdrop overlay, and multiple content areas through named slots.
The component integrates with the
Invoker Commands API:
an Ignite button or a native <button> with command="--show" / "--hide" / "--toggle"
and commandfor pointing to this element will call the corresponding method
declaratively without any JavaScript.
- Element
-
igc-dialog
- Slots
-
default— General-purpose content area. Also the target for any `<form method="dialog">` placed inside the dialog. -
title— Content rendered in the dialog header. Falls back to the `title` attribute when empty. -
message— A dedicated message/body area rendered above the default slot. Hidden when no content is assigned. -
footer— Content rendered in the dialog footer. When empty, a default "OK" close button is shown (unless `hide-default-action` is set).
- CSS Parts
-
base— The native `<dialog>` element. -
title— The `<header>` element wrapping the title slot. -
content— The `<section>` element wrapping the message and default slots. -
footer— The `<footer>` element wrapping the footer slot. -
backdrop— The decorative backdrop overlay element. -
animating— Applied to the backdrop while an animation is running.
Constructors
Section titled "Constructors"IgcDialogComponent
new IgcDialogComponent(): IgcDialogComponentDefined in src/components/dialog/dialog.ts:171
Returns IgcDialogComponent
Properties
Section titled "Properties"closeOnOutsideClick
Section titled "closeOnOutsideClick"When set, clicking on the backdrop area outside the dialog surface will close it (emitting close events).
Has no effect when the dialog is not yet open.
closeOnOutsideClick: boolean = falseDefined in src/components/dialog/dialog.ts:122
hideDefaultAction
Section titled "hideDefaultAction"When set, the built-in "OK" close button in the footer is not rendered.
Has no effect when content is projected into the footer slot, since
the slot content replaces the default button entirely.
hideDefaultAction: boolean = falseDefined in src/components/dialog/dialog.ts:133
keepOpenOnEscape
Section titled "keepOpenOnEscape"When set, pressing the Escape key will not close the dialog.
By default the browser closes a modal dialog on Escape. Enable this
option when the dialog guards unsaved work and should require an explicit
user action to dismiss.
keepOpenOnEscape: boolean = falseDefined in src/components/dialog/dialog.ts:111
Whether the dialog is open.
Setting this property programmatically will open or close the dialog
without animation and without emitting close events.
Prefer the show(), hide(), and toggle() methods for animated
transitions.
open: boolean = falseDefined in src/components/dialog/dialog.ts:146
Optional returnValue
Section titled "returnValue"The return value of the dialog.
Automatically set to the value of the submitter element when a
<form method="dialog"> inside the dialog is submitted. Can also
be set programmatically before calling hide().
returnValue: stringDefined in src/components/dialog/dialog.ts:165
title
Section titled "title"The title displayed in the dialog header.
Overridden by any content projected into the title slot.
title: stringDefined in src/components/dialog/dialog.ts:155
tagName
Section titled "tagName"The tagName read-only property of the Element interface returns the tag name of the element on which it's called.
tagName: "igc-dialog" = 'igc-dialog'Defined in src/components/dialog/dialog.ts:68
Methods
Section titled "Methods"addEventListener
Section titled "addEventListener"Inherited from: EventEmitterMixin< IgcDialogComponentEventMap, Constructor<LitElement> >(LitElement)
addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): voidDefined in src/components/common/mixins/event-emitter.ts:7
Parameters
- type:
K - listener:
object - options:
boolean | AddEventListenerOptions
Returns void
emitEvent
Section titled "emitEvent"Inherited from: EventEmitterMixin< IgcDialogComponentEventMap, Constructor<LitElement> >(LitElement)
emitEvent(type: K, eventInitDict: CustomEventInit<D>): booleanDefined in src/components/common/mixins/event-emitter.ts:30
Parameters
- type:
K - eventInitDict:
CustomEventInit<D>
Returns boolean
Closes the dialog with an animated fade-out transition.
Returns true when the dialog was successfully closed, or false if
it was already closed.
hide(): Promise<boolean>Defined in src/components/dialog/dialog.ts:290
Returns Promise<boolean>
removeEventListener
Section titled "removeEventListener"Inherited from: EventEmitterMixin< IgcDialogComponentEventMap, Constructor<LitElement> >(LitElement)
removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): voidDefined in src/components/common/mixins/event-emitter.ts:17
Parameters
- type:
K - listener:
object - options:
boolean | EventListenerOptions
Returns void
Opens the dialog with an animated fade-in transition.
Returns true when the dialog was successfully opened, or false if
it was already open.
show(): Promise<boolean>Defined in src/components/dialog/dialog.ts:274
Returns Promise<boolean>
toggle
Section titled "toggle"Toggles the dialog open or closed depending on its current state.
Equivalent to calling show() when closed and hide() when open.
Returns true when the transition completed successfully.
toggle(): Promise<boolean>Defined in src/components/dialog/dialog.ts:300
Returns Promise<boolean>
register
Section titled "register"register(): voidDefined in src/components/dialog/dialog.ts:72
Returns void
Events
Section titled "Events"igcClosed
Section titled "igcClosed"igcClosed: CustomEvent<void>Defined in src/components/dialog/dialog.ts:21
igcClosing
Section titled "igcClosing"igcClosing: CustomEvent<void>Defined in src/components/dialog/dialog.ts:20