Constructor
JavaScript:
-
new Coral.Dialog()
ordocument.createElement('coral-dialog')
HTML Tag:
-
<coral-dialog>
Extends
Sub-components
Static Properties
-
Coral.Dialog.backdrop {String}
-
Properties:
Name Type Value Description NONE String none No backdrop. MODAL String modal A backdrop that hides the dialog when clicked. STATIC String static A backdrop that does not hide the dialog when clicked. -
Coral.Dialog.closable {String}
-
Properties:
Name Type Value Description ON String on Show a close button on the dialog and close the dialog when clicked. OFF String off Do not show a close button. Elements with the coral-close
attribute will still close the dialog. -
Coral.Dialog.interaction {String}
-
Properties:
Name Type Value Description ON String on Keyboard interaction is enabled. OFF String off Keyboard interaction is disabled. -
Coral.Dialog.variant {String}
-
Properties:
Name Type Value Description DEFAULT String default A dialog with the default, gray header and no icon. ERROR String error A dialog with a red header and warning icon, indicating that an error has occurred. WARNING String warning A dialog with an orange header and warning icon, notifying the user of something important. SUCCESS String success A dialog with a green header and checkmark icon, indicates to the user that an operation was successful. HELP String help A dialog with a blue header and question mark icon, provides the user with help. INFO String info A dialog with a blue header and info icon, informs the user of non-critical information.
Instance Properties
-
instance.backdrop {Coral.Dialog.backdrop}
-
- Default Value:
- Coral.Dialog.backdrop.MODAL
- HTML Attribute:
- backdrop
-
instance.closable {Coral.Dialog.closable}
Reflected -
- Default Value:
- Coral.Dialog.closable.OFF
- HTML Attribute:
- closable
-
instance.content {HTMLElement}
-
-
instance.focusOnShow {Coral.mixin.overlay.focusOnShow | HTMLElement | String}
-
- Inherited From:
- Default Value:
- HTML Attribute:
- focusonshow
-
instance.footer {HTMLElement}
-
-
instance.fullscreen {Boolean}
Reflected -
- Default Value:
- false
- HTML Attribute:
- fullscreen
-
instance.header {HTMLElement}
-
-
instance.hidden {Boolean}
Reflected -
- Inherited From:
- Default Value:
- false
- HTML Attribute:
- hidden
-
instance.icon {String}
-
- Default Value:
- ""
- HTML Attribute:
- icon
-
instance.interaction {Coral.Dialog.interaction}
-
- Default Value:
- Coral.Dialog.interaction.ON
-
instance.movable {Boolean}
Reflected -
- Default Value:
- false
- HTML Attribute:
- movable
-
instance.open {Boolean}
Reflected -
- Inherited From:
- Default Value:
- false
- HTML Attribute:
- open
-
instance.returnFocus {Coral.mixin.overlay.returnFocus}
-
- Default Value:
- Coral.mixin.overlay.returnFocus.ON
- HTML Attribute:
- returnfocus
-
instance.trapFocus {Coral.mixin.overlay.trapFocus}
-
- Default Value:
- Coral.mixin.overlay.trapFocus.ON
- HTML Attribute:
- trapfocus
-
instance.variant {Coral.Dialog.variant}
-
- Default Value:
- Coral.Dialog.variant.DEFAULT
- HTML Attribute:
- variant
Methods
-
instance.center
-
- Returns:
-
this, chainable. {Coral.Dialog}
-
instance.get
-
- Parameters:
-
Name Type Description property String The name of the property to fetch the value of. - Returns:
-
Property value. {*}
- Inherited From:
-
instance.hide
-
- Returns:
-
this, chainable {Coral.Component}
- Inherited From:
-
instance.off
-
- Parameters:
-
Name Type Optional Description eventName String No
The event name to stop listening for. selector String Yes
The selector that was used for event delegation. func function No
The function that was passed to on()
.useCapture Boolean Yes
Only remove listeners with useCapture
set to the value passed in. - Returns:
-
this, chainable. {Coral.Component}
- Inherited From:
-
instance.on
-
- Parameters:
-
Name Type Optional Default Description eventName String No
The event name to listen for. selector String Yes
The selector to use for event delegation. func function No
The function that will be called when the event is triggered. useCapture Boolean Yes
Whether or not to listen during the capturing or bubbling phase. - Returns:
-
this, chainable. {Coral.Component}
- Inherited From:
-
instance.remove
-
- Inherited From:
-
instance.returnFocusTo
-
- Parameters:
-
Name Type Description element HTMLElement The element to return focus to. This must be a DOM element, not a jQuery object or selector. - Returns:
-
this, chainable {Coral.Component}
- Inherited From:
-
instance.set
-
- Parameters:
-
Name Type Description property String The name of the property to set. value * The value to set the property to. silent Boolean If true, events should not be triggered as a result of this set. - Returns:
-
this, chainable. {Coral.Component}
- Inherited From:
-
instance.show
-
- Returns:
-
this, chainable {Coral.Component}
- Inherited From:
-
instance.trigger
-
- Parameters:
-
Name Type Optional Default Description eventName String No
The event name to trigger. props Object Yes
Additional properties to make available to handlers as event.detail
.bubbles Boolean Yes
Set to false
to prevent the event from bubbling.cancelable Boolean Yes
Set to false
to prevent the event from being cancelable. - Returns:
-
CustomEvent object {CustomEvent}
- Inherited From:
Events
-
coral-component:attached
-
- Callback Parameters:
-
Name Type Description event Object Event object.
- Inherited From:
- Deprecated:
- since 1.14.0, use
MutationObserver
instead.
- since 1.14.0, use
-
coral-component:detached
-
- Callback Parameters:
-
Name Type Description event Object Event object.
- Inherited From:
- Deprecated:
- since 1.14.0, use
MutationObserver
instead.
- since 1.14.0, use
-
coral-component:ready
-
- Callback Parameters:
-
Name Type Description event Object Event object.
- Inherited From:
- Deprecated:
- since 1.9.0, use
Coral.commons.ready()
instead.
- since 1.9.0, use
-
coral-overlay:beforeclose
-
- Callback Parameters:
-
Name Type Description event Object Event object.
Name Type Description event.preventDefault function Call to stop the overlay from closing.
- Inherited From:
-
coral-overlay:beforeopen
-
- Callback Parameters:
-
Name Type Description event Object Event object.
Name Type Description event.preventDefault function Call to stop the overlay from opening.
- Inherited From:
-
coral-overlay:close
-
- Callback Parameters:
-
Name Type Description event Object Event object.
- Inherited From:
-
coral-overlay:open
-
- Callback Parameters:
-
Name Type Description event Object Event object.
- Inherited From:
hide()
or instance.open = false
.
show()
or instance.open = true
.
hide()
or instance.open = false
show()
or instance.open = true