Canvas

The canvas of the dialog UI is the area where components are placed.
Added in v3.3.0.

Properties

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	canvas	id	string	canvas	The [id] property cannot be set in actions.
2	Type	String	Modal				Dialog display type setting
3	Width	Number	600	width	number	600	Dialog width
4	Height	Number	380	height	number	380	Total dialog height
5	X	Number		x	number		X coordinate position
6	Y	Number		y	number		Y coordinate position
7	Transition Component	Select 1. Fade 2. Slide	Fade	transitionComponent	string	fade	Dialog transition animation setting The [transitionComponent] property cannot be set in actions.
8	Slide Direction	Select 1. Up 2. Down 3. Right 4. Left	Down	slideDirection	string	down	Dialog slide direction The [slideDirection] property cannot be set in actions.
9	Transition Duration	Number	500	transitionDuration	number	500	Dialog transition duration The [transitionDuration] property cannot be set in actions.
10	Disable Escape Key Down	Boolean	OFF	disableEscapeKeyDown	boolean	false	When OFF, the dialog can be closed with the Esc key.
11	Dividers	Boolean	ON	dividers	boolean	true	When ON, divider lines can be displayed between the header and footer.
12	Draggable	Boolean	OFF	draggable	boolean	false	When ON, the dialog can be dragged. The [draggable] property cannot be set in actions.
13	Show Title	Boolean	ON	showTitles	boolean	true	When ON, displays the header area.
14	Close Button	Boolean	OFF	closeButton	boolean	false	When ON, displays an × button in the header area.
15	Title	String	Title	title	string	title	Specifies the string to display in the header area
16	Title Color	String Color Picker		titleColor	string		Title text color setting
17	Title Background Color	String Color Picker		titleBackgroundColor	string		Header area background color
18	Content Background Color	String Color Picker		contentBackgroundColor	string		Content area background color
19	Content Background Repeat	Select 1. REPEAT 2. NO-REPEAT	No Repeat	contentBackgroundRepeat	string	no-repeat	Background image repeat setting
20	Content Background Size	Select 1. Auto 2. Contain 3. Cover	Auto	contentBackgroundSize	string	auto	Background image object-fit setting
21	Show Actions	Boolean	ON	showActions	boolean	true	When ON, displays the footer area.
22	Actions Value	[Detail 1]	[Detail 1]	actionsValue	object array	[Detail 1]	Footer area label and click action settings
23	Action Background Color	String Color Picker		actionBackgroundColor	string		Footer area background color

Note

• If the [X] and [Y] properties are not set, the dialog will be displayed in the center of the editor.

• $fn.nextUI() cannot be used in dialogs.

• Transitions from dialog to dialog are not supported.

[Detail 1] Actions Setting

In the actions setting, you can configure the buttons displayed in the footer area. The configurable values are as follows:

No	Column	Description
1	ID	ID of the button to display in the footer
2	Label	Label of the button to display in the footer
3	Color	Color of the button to display in the footer
4	Style	Style of the button to display in the footer
5	Click Event	Action of the button to display in the footer The options are: 1. None - Do nothing 2. Action - Execute action 3. Close - Close the dialog

The default values are as follows:

[
  {"id":"cancel","label":"CANCEL","color":"#1976d2","variant":"text","clickEvent":"Close"},
  {"id":"execute","label":"EXECUTE","color":"#1976d2","variant":"text","clickEvent":"Action"}
  ]

Note

• If the dialog is displayed using $fn.openDialog(), the canvas action of the source UI will execute when the dialog closes.
• If the dialog is displayed with click event: DIALOG, the close action of the source component will execute when the dialog closes.
• clickEvent Close can close the dialog.