# new Dialog(config)
You can create a Dialog using the class or using the shorthand:
// Using kiss namespace
new kiss.ui.Dialog(config)
// Using the class
new Dialog(config)
// Using the shorthand
createDialog(config)
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
string
|
Configuration object, or a simple text to display in the dialog box |
|
id |
string
|
<optional> |
optional id in case you need to manage this dialog by id |
type |
string
|
dialog | message | danger | input | select. Default = "dialog" |
|
message |
string
|
||
textAlign |
string
|
use "center" to center the text in the dialog box |
|
action |
function
|
Function called if the user clicks on the OK button. The function receives the input value if the dialog type is "input" |
|
options |
Array.<object>
|
<optional> |
Only for "select" type: define the list of options. |
multiple |
boolean
|
<optional> |
Only for "select" type: allow to select multiple options. |
users |
boolean
|
<optional> |
Only for "directory" type: allow to select users |
groups |
boolean
|
<optional> |
Only for "directory" type: allow to select groups |
roles |
boolean
|
<optional> |
Only for "directory" type: allow to select roles |
autoClose |
boolean
|
<optional> |
if true (default), the window is closed on validation. If false, the window is closed only if the |
icon |
string
|
<optional> |
Header icon |
header |
string
|
<optional> |
set to false to hide the header |
headerHeight |
string
|
<optional> |
|
headerColor |
string
|
<optional> |
|
headerBackgroundColor |
string
|
<optional> |
|
title |
string
|
<optional> |
|
buttonOKPosition |
string
|
<optional> |
"left" | "right" (default = "right") |
buttonOKText |
string
|
<optional> |
Text of the "OK" button. Default = "OK" |
buttonCancelText |
string
|
<optional> |
Text of the "Cancel" button. Default = "Cancel" |
iconOK |
string
|
boolean
|
<optional> |
Icon of the "OK" button, or false to hide the icon |
iconCancel |
string
|
boolean
|
<optional> |
Icon of the "Cancel" button, or false to hide the icon |
colorOK |
string
|
<optional> |
Hexa color code of the OK button |
colorCancel |
string
|
<optional> |
Hexa color code of the Cancel button |
noOK |
string
|
<optional> |
If true, hide the OK button |
noCancel |
string
|
<optional> |
If true, hide the Cancel button |
top |
string
|
number
|
<optional> |
|
left |
string
|
number
|
<optional> |
|
width |
string
|
number
|
<optional> |
|
height |
string
|
number
|
<optional> |
|
animation |
string
|
<optional> |
Check component's animations |
this
Example
// Display a simple message box: it only has an OK button
createDialog({
message: "Your asset is ready"
})
// Same thing, using just a text as argument
createDialog("Your asset is ready")
// Display a dialog box: it has OK and Cancel buttons
createDialog({
type: "dialog",
message: "Do you want to do that?",
action: () => console.log("You've done that!")
})
// Display a danger box: OK button and header are red + exclamation icon
createDialog({
type: "danger",
message: "Do you want to delete the database?",
action: () => console.log("You've deleted the database!")
})
// Display a dialog box with an input field: the callback catches the entered value
createDialog({
type: "input",
message: "Please enter your name:",
action: (enteredValue) => console.log("You've entered " + enteredValue)
})
// Display a dialog box with a select field: the callback catches the selected values in an array
createDialog({
type: "select",
message: "Please select your items:",
multiple: true, // Allow to select multiple options
options: ["Item A", "Item B", "Item C"],
action: (enteredValues) => console.log("You've entered " + enteredValues.join(" / "))
})