ダイアログUI - キャンバス

ダイアログ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	下余白	数値	24	bottomPadding	number	24	キャンバスの画面下部の余白領域の設定 v3.4.0で追加されたプロパティ
8	遷移アニメーション	選択 1.フェード 2. スライド	フェード	transitionComponent	string	fade	ダイアログの遷移時のアニメーション設定 [transitionComponent]プロパティはアクションでは設定はできません。
9	スライド方向	選択 1. 上 2. 下 3. 右 4. 左	下	slideDirection	string	down	ダイアログのスライド方向 [slideDirection]プロパティはアクションでは設定できません。
10	遷移時間	数値	500	transitionDuration	number	500	ダイアログの遷移時間 [transitionDuration]プロパティはアクションでは設定できません。
11	Escキー無効	真偽	OFF	disableEscapeKeyDown	boolean	false	OFFの場合に、Escキーでダイアログをクローズすることができます。
12	区切り線	真偽	ON	dividers	boolean	true	ONの場合に、ヘッダーとフッターの間に区切り線を表示できます。
13	ドラッグ可能	真偽	OFF	draggable	boolean	false	ONの場合に、ダイアログのドラッグ操作ができます。 [draggable]プロパティはアクションでは設定できません。
14	タイトル表示	真偽	ON	showTitles	boolean	true	ONの場合に、ヘッダー領域を表示します。
15	閉じるボタン	真偽	OFF	closeButton	boolean	false	ONの場合に、ヘッダー領域に×ボタンを表示できます。
16	タイトル	文字列	Title	title	string	title	ヘッダー領域に表示する文字列の指定
17	タイトル文字色	文字列 カラーピッカー		titleColor	string		タイトル文字色の設定
18	タイトル背景色	文字列 カラーピッカー		titleBackgroundColor	string		ヘッダー領域の背景色
19	コンテンツ背景色	文字列 カラーピッカー		contentBackgroundColor	string		コンテンツ領域の背景色
20	背景画像の繰り返し	選択 1. REPEAT 2. NO-REPEAT	繰り返しなし	backgroundRepeat	string	no-repeat	背景画像の繰り返し設定
21	背景画像のサイズ	選択 1. AUTO 2. CONTAIN 3. COVER	AUTO	backgroundSize	string	auto	背景画像のobject-fitの設定
22	アクション表示	真偽	ON	showActions	boolean	true	ONの場合に、フッター領域を表示します。
23	アクション設定	[詳細1]	[詳細1]	actionsValue	object array	[詳細1]	フッター領域のラベルやクリックアクションの設定
24	アクション背景色	文字列 カラーピッカー		actionBackgroundColor	string		フッター領域の背景色
25	タイマーイベント	選択 1. None 2. Action	None	timerEvent	string	none	タイマーイベントの有効化設定 v3.4.0で追加されたプロパティ
26	インターバル	数値	60	interval	number	60	タイマーイベントの発生間隔設定 最小値は10となります。 最大値は300となります。 v3.4.0で追加されたプロパティ

ノート

• [X]、[Y]プロパティが設定されていない場合エディタ中央にダイアログが表示されます。
• [アクション]>[canvas]に記述した処理は[load]イベントの際に実行されます。
• [タイマーアクション]に記述した処理は[timer]イベントの際に実行されます。
• [タイマーイベント]で[Action]を選択した場合にのみ、キャンバスの右クリックから[タイマーアクション]を設定することが出来ます。
• [インターバル]の値に範囲外の値を設定した場合、タイマーイベントは実行されなくなります。
  アクションから意図的に範囲外の値を設定することで、タイマーイベントの開始および停止をコントロールすることが出来ます。
• ダイアログ上では、$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は、ダイアログを閉じることができます。

イベント

イベント名	説明
onclick	フッターに表示するボタンをクリックした際に発生します。
load	キャンバスを読み込んだ際に発生します。
timer	キャンバスを読み込んだ後にインターバルに設定した値の間隔で発生します。