キャンバス

ダイアログUIのキャンバスはコンポーネントが配置される領域です。
v3.3.0で追加されました。

プロパティ

No	項目	入力値	デフォルト値	アクションプロパティ	タイプ	アクションデフォルト値	説明
1	ID	文字列	canvas	id	string	canvas	[id]プロパティはアクションでは設定できません。
2	タイプ	文字列	Modal				ダイアログ表示のタイプ設定
3	幅	数値	600	width	number	600	ダイアログの幅
4	高さ	数値	380	height	number	380	ダイアログ全体の高さ
5	X	数値		x	number		X座標の位置
6	Y	数値		y	number		Y座標の位置
7	遷移アニメーション	選択 1.フェード 2. スライド	フェード	transitionComponent	string	fade	ダイアログの遷移時のアニメーション設定 [transitionComponent]プロパティはアクションでは設定はできません。
8	スライド方向	選択 1. 上 2. 下 3. 右 4. 左	下	slideDirection	string	down	ダイアログのスライド方向 [slideDirection]プロパティはアクションでは設定できません。
9	遷移時間	数値	500	transitionDuration	number	500	ダイアログの遷移時間 [transitionDuration]プロパティはアクションでは設定できません。
10	Escキー無効	真偽	OFF	disableEscapeKeyDown	boolean	false	OFFの場合に、Escキーでダイアログをクローズすることができます。
11	区切り線	真偽	ON	dividers	boolean	true	ONの場合に、ヘッダーとフッターの間に区切り線を表示できます。
12	ドラッグ可能	真偽	OFF	draggable	boolean	false	ONの場合に、ダイアログのドラッグ操作ができます。 [draggable]プロパティはアクションでは設定できません。
13	タイトル表示	真偽	ON	showTitles	boolean	true	ONの場合に、ヘッダー領域を表示します。
14	閉じるボタン	真偽	OFF	closeButton	boolean	false	ONの場合に、ヘッダー領域に×ボタンを表示できます。
15	タイトル	文字列	Title	title	string	title	ヘッダー領域に表示する文字列の指定
16	タイトル文字色	文字列 カラーピッカー		titleColor	string		タイトル文字色の設定
17	タイトル背景色	文字列 カラーピッカー		titleBackgroundColor	string		ヘッダー領域の背景色
15	コンテンツ背景色	文字列 カラーピッカー		contentBackgroundColor	string		コンテンツ領域の背景色
16	背景画像の繰り返し	選択 1. REPEAT 2. NO-REPEAT	繰り返しなし	contentBackgroundRepeat	string	no-repeat	背景画像の繰り返し設定
17	背景画像のサイズ	選択 1. AUTO 2. CONTAIN 3. COVER	AUTO	contentBackgroundSize	string	auto	背景画像のobject-fitの設定
18	アクション表示	真偽	ON	showActions	boolean	true	ONの場合に、フッター領域を表示します。
19	アクション設定	[詳細1]	[詳細1]	actionsValue	object array	[詳細1]	フッター領域のラベルやクリックアクションの設定
20	アクション背景色	文字列 カラーピッカー		actionBackgroundColor	string		フッター領域の背景色

ノート

• [X]、[Y]プロパティが設定されていない場合エディタ中央にダイアログが表示されます。

• ダイアログ上では、$fn.nextUI()は利用できません。

• ダイアログからダイアログへの遷移はサポートしていません。

[詳細1]アクション設定

アクション設定では、フッター領域に表示するボタンの設定を行うことができます。 設定可能な値は以下の通りとなります。

No	カラム	説明
1	ID	フッターに表示するボタンのID
2	ラベル	フッターに表示するボタンのラベル
3	色	フッターに表示するボタンの色
4	スタイル	フッターに表示するボタンのスタイル
5	クリックイベント	フッターに表示するボタンのアクション 選択肢は以下となります。 1.None - 何もしない 2.Action - アクション実行 3.Close - ダイアログをクローズする

デフォルト値は以下のようになります。

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

ノート

• ダイアログが$fn.openDialog()で表示されている場合は、ダイアログクローズ時に遷移元UIのキャンバスアクションが実行されます。
• ダイアログがクリックイベント：DIALOGで表示される場合は、ダイアログクローズ時に遷移元コンポーネントのクローズアクションが実行されます。
• clickEvent Closeは、ダイアログを閉じることができます。