new Dialog(id, properties) → {Object}
Parameters:
| Name |
Type |
Description |
id |
String
|
The id of the component. |
properties |
Object
|
HTMLElement
|
The properties used to initialize the component or the container element. |
- Mixes In:
Returns:
An instance of the component.
-
Type
-
Object
Extends
Classes
- DialogEvents
Members
Gets or sets a value indicating whether the box's horizontal position is aligned to the left, center or right of the expander element or pointer.
Type:
- Inherited From:
Gets or sets a value indicating whether the box's vertical position is aligned to the top, center or bottom of the expander element or pointer.
Type:
- Inherited From:
animation :animation
Type:
Properties:
| Name |
Type |
Description |
showType |
componyx.UI.Box.AnimationTypeOption
|
Gets or sets the animation type used when showing the box. |
showClass |
String
|
Gets or sets the CSS class applied when showing the box. |
showDirection |
String
|
Gets or sets the animation direction (down, right, up, left) used when showing the box. |
showFade |
Boolean
|
Gets or sets a value indicating if fading is used when showing the box. |
hideType |
componyx.UI.Box.AnimationTypeOption
|
Gets or sets the animation type used when hiding the box. |
hideClass |
String
|
Gets or sets the CSS class applied when hiding the box. |
hideDirection |
String
|
Gets or sets the animation direction (top, right, bottom, left) used when hiding the box. |
hideFade |
Boolean
|
Gets or sets a value indicating if fading is used when hiding the box. |
- Inherited From:
autoClose :Boolean
Gets or sets a value indicating whether the dialog will be automatically closed on a button event.
Type:
autoFit :Boolean
Gets or sets a value indicating whether the box should try to fit when the window is too small.
Type:
- Inherited From:
autoFocus :Boolean
Gets or sets a value indicating whether the first element of the focusable list should get focus when the box is shown.
Type:
- Inherited From:
autoInvertAnimation :Boolean
Gets or sets a value indicating whether the animation direction should be auto inverted when the box is inverted.
Type:
- Inherited From:
autoInvertFit :Boolean
Gets or sets a value indicating whether the box should try to fit inverted when the window is too small.
Type:
- Inherited From:
Gets or sets the auto position of the box.
Type:
- Inherited From:
autoResizeFit :Boolean
Gets or sets a value indicating whether the box should be resized when the window is too small.
Type:
- Inherited From:
bottom :String
Gets or sets the bottom position of the box. Overwrites the property if already defined through Style.
Type:
- Inherited From:
Gets or sets the button settings.
Type:
confirmOnEnterKey :Boolean
Gets or sets a value indicating whether the dialog confirm action is executed when the enter-key is pressed within a field inside the box element.
Type:
contentTag :String
Gets the tag name of the content element.
Type:
- Inherited From:
cssClassBox :String
Gets or sets the css class of the box, which is used for the dialog layout.
Type:
Gets or sets the css class of the button holder for both the header and footer of the dialog.
Type:
cssClassContent :String
Gets or sets the css class of the box content.
Type:
- Inherited From:
Gets or sets the css class of the content footer.
Type:
Gets or sets the css class of the content header.
Type:
cssClassContentHolder :String
Gets or sets the css class of the content holder.
Type:
cssClassHorizontalInverted :String
Gets or sets the css class of the box when AutoInvertFit is true and the box is inverted horizontally.
Type:
- Inherited From:
cssClassModal :String
Gets or sets the css class of the box modal overlay.
Type:
- Inherited From:
cssClassVerticalInverted :String
Gets or sets the css class of the box when AutoInvertFit is true and the box is inverted vertically.
Type:
- Inherited From:
Type:
- Inherited From:
- See:
-
draggable :Boolean
Gets or sets a value indicating whether the box is draggable.
Type:
- Inherited From:
enterKeySubmitter :HTMLElement|String|null
Gets or sets the submitter element or element-id on which to fire a click event when the enter-key is pressed within a field inside the box element.
Type:
-
HTMLElement
|
String
|
null
- Inherited From:
Type:
- Overrides:
Gets or sets the expand direction.
Type:
- Inherited From:
expander :HTMLElement|String|null
Gets or sets the expander element or element-id.
Type:
-
HTMLElement
|
String
|
null
- Inherited From:
handleFocus :Boolean
Gets or sets a value indicating whether the box should handle focus events for focusable child elements. Only applies when modal is false.
Type:
- Inherited From:
height :String
Gets or sets the height of the box. Overwrites the property if already defined through Style.
Type:
- Inherited From:
hideOnOutsideClick :Boolean
Gets or sets a value indicating whether the box is hidden when the user clicks outside the box.
Type:
- Inherited From:
left :String
Gets or sets the left position of the box. Overwrites the property if already defined through Style.
Type:
- Inherited From:
modal :Boolean
Gets or sets a value indicating whether the box is displayed as modal popup.
Type:
- Inherited From:
resizeToMaxHeight :Boolean
Gets or sets a value indicating whether the box is either resized to the window height or available (inverted) space when auto resized.
Type:
- Inherited From:
resizeToMaxWidth :Boolean
Gets or sets a value indicating whether the box is either resized to the window width or available (inverted) space when auto resized.
Type:
- Inherited From:
right :String
Gets or sets the right position of the box. Overwrites the property if already defined through Style.
Type:
- Inherited From:
stretchToContent :Boolean
Gets or sets a value indicating if the box element must stretch to the size of the content element. This setting is useful when the box is positioned absolute/fixed and the content element is a flex-box (display:flex).
Type:
- Inherited From:
stretchToExpander :Boolean
Gets or sets a value indicating if the box element must stretch to the size of the expander element. The content width has priority over the expander width when stretchToContent is enabled and the content exceeds the expander width.
Type:
- Inherited From:
tabIndexFocus :Boolean
Gets or sets a value indicating whether the focusable list is ordered by tabindex (requires all elements to have a tabindex set).
Type:
- Inherited From:
top :String
Gets or sets the top position of the box. Overwrites the property if already defined through Style.
Type:
- Inherited From:
trackPointer :Boolean
Gets or sets a value indicating whether the box position tracks the pointer when AutoPosition is set to Pointer.
Type:
- Inherited From:
width :String
Gets or sets the width of the box. Overwrites the property if already defined through Style.
Type:
- Inherited From:
Methods
alert(callBack, headeropt, contentopt, footeropt, confirmTextopt)
Shows the dialog in alert mode.
Parameters:
| Name |
Type |
Attributes |
Description |
callBack |
function
|
|
A callback function to invoke after confirmation. |
header |
HTMLElement
|
Array.<HTMLElement>
|
DocumentFragment
|
String
|
<optional>
|
HTML string or element node as content. |
content |
HTMLElement
|
Array.<HTMLElement>
|
DocumentFragment
|
String
|
<optional>
|
HTML string or element node as content. |
footer |
HTMLElement
|
Array.<HTMLElement>
|
DocumentFragment
|
String
|
<optional>
|
HTML string or element node as content. |
confirmText |
String
|
<optional>
|
The text of the confirmation button. |
confirm(callBack, headeropt, contentopt, footeropt, confirmTextopt, denyTextopt)
Shows the dialog in confirmation mode.
Parameters:
| Name |
Type |
Attributes |
Description |
callBack |
function
|
|
A callback function to invoke after confirmation. |
header |
HTMLElement
|
Array.<HTMLElement>
|
DocumentFragment
|
String
|
<optional>
|
HTML string or element node as content. |
content |
HTMLElement
|
Array.<HTMLElement>
|
DocumentFragment
|
String
|
<optional>
|
HTML string or element node as content. |
footer |
HTMLElement
|
Array.<HTMLElement>
|
DocumentFragment
|
String
|
<optional>
|
HTML string or element node as content. |
confirmText |
String
|
<optional>
|
The text of the confirmation button. |
denyText |
String
|
<optional>
|
The text of the deny button. |
destroy()
- Overrides:
- See:
-
Gets the underlaying box component.
Returns:
-
Type
-
componyx.UI.Box
hide()
- Overrides:
postRender()
Executes the post render procedure.
render()
- Overrides:
setContentTemplate(content)
Sets the content template
Parameters:
| Name |
Type |
Description |
content |
HTMLElement
|
Array.<HTMLElement>
|
DocumentFragment
|
String
|
HTML string or element node as content. Pass null or empty string to remove the existing template. |
- Overrides:
- See:
-
componyx.UI.base.addTemplate
Parameters:
| Name |
Type |
Description |
content |
HTMLElement
|
Array.<HTMLElement>
|
DocumentFragment
|
String
|
HTML string or element node as content. Pass null or empty string to remove the existing template. |
- See:
-
componyx.UI.base.addTemplate
Parameters:
| Name |
Type |
Description |
content |
HTMLElement
|
Array.<HTMLElement>
|
DocumentFragment
|
String
|
HTML string or element node as content. Pass null or empty string to remove the existing template. |
- See:
-
componyx.UI.base.addTemplate
show()
- Overrides:
stopAnimation()
- Inherited From:
suppressNextChangeEvent(action)
Suppresses any change events fired by the underlying input element during the execution of the provided action. Use this when programmatically setting a component value to prevent the change event from propagating as a user interaction.
The suppression is automatically lifted after the action completes, even if it throws.
Parameters:
| Name |
Type |
Description |
action |
function
|
The action to execute with change events suppressed. |
- Overrides:
- Mixes In:
toggle()
Shows or hides the component.
- Inherited From:
update(contentopt, showopt)
Updates the box view to stretch and position with the updated content.
Parameters:
| Name |
Type |
Attributes |
Default |
Description |
content |
HTMLElement
|
Array.<HTMLElement>
|
DocumentFragment
|
String
|
<optional>
|
|
A new content template. |
show |
Boolean
|
<optional>
|
true
|
A value indicating if the box should be displayed when hidden. |
- Inherited From:
Type Definitions
DialogEventArgs
Type:
Properties: