Image
最終更新
最終更新
Imageは主にフォームの送信や表示の際に使う画像用のコンポーネントです。Dashcombが提供しているImageは、通常のHTMLの <img> をベースにして、管理画面の用途に合わせています。
ImageのURLの初期設定はIDE画面にての値や固定値などをデフォルトか画像URLに埋め込みが可能です。 ImageのURLの変更は利用者画面にてやなどを使って書き込みが可能です。
Imageコンポーネントには、以下のプロパティが含まれています。
画像オブジェクトの変数名です。Imageコンポーネントをドラッグ＆ドロップすると、そのオブジェクトが自動的に image1、image2... と名付けられます。
ここで設定した変数名は、構文 {{オブジェクト名.プロパティ}} でオブジェクトを参照するために利用できます。
（例）{{image1.imageUrl}} で image1 の値を取得することができます。
トグルスイッチをONにすると、インプットが非表示になります。
画像のラベルテキストです。Image コンポーネントをドラッグ＆ドロップすると、自動的に Image と設定されます。
{{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。
デフォルト
アップロード画像のURLの初期値です。画面を開いた時点で、value 属性に自動的に設定される値を指定します。初期値は空文字列（""）です。
IDE画面でのみ設定可能となっており、利用者画面では変更できません。
また、デフォルトと画像URL(後述)を両方設定した場合、画像URLの設定を優先します。
{{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。
（例）オブジェクト image1 のデフォルトに https://cdn.dashcomb.com/problem_desktop.png を入力することで、画面初期表示の際に、この画像エリアに予め Dashcombのproblem_desktop.png という画像が表示されています。
（例）オブジェクト image2 のデフォルトに {{image1.imageUrl}} を入力することによって、image1 に入力した内容がリアルタイムで image2 に反映することができます。
現在の設定値は、{{オブジェクト名.defaultValue}} で参照できます。
画像URL
画像のURLの初期値です。画面を開いた時点で、value 属性に自動的に設定される値を指定します。初期値は空文字列（""）です。
IDE画面でのみ設定可能となっており、利用者画面では変更できません。
デフォルトと画像URL(後述)を両方設定した場合、画像URLの設定を優先します。
{{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。
（例）オブジェクト image1 の画像URLに https://cdn.dashcomb.com/problem_desktop.png を入力することで、画面初期表示の際に、この画像エリアに予め Dashcombのproblem_desktop.png という画像が表示されています。
（例）オブジェクト image2 の画像URLに {{image1.imageUrl}} を入力することによって、image1 に入力した内容がリアルタイムで image2 に反映することができます。
また、Inputコンポーネント・Uploadコンポーネントなどを経由して変更が可能です。
（例）オブジェクト image1 の画像URLに {{input1.value}} を入力し、オブジェクト input1 の入力欄に https://cdn.dashcomb.com/problem_desktop.png を入力することで、input1 に入力した内容がリアルタイムで image1 に反映することができます。つまり、image1 の画像エリアにリアルタイムで Dashcombのproblem_desktop.png という画像が表示されています。
（例）オブジェクト image1 の画像URLに {{upload1.value}} を入力し、オブジェクト upload1 の画像エリアをクリックして画像ファイルを選んでアップロードすることで、upload1 でアップロードした画像がリアルタイムで image1 に反映することができます。つまり、image1 の画像エリアにリアルタイムでアップロードした画像が表示されています。
高さ
画像の高さを指定します。初期設定では2行に設定されており、最小設定は1行です。
画像の形
表示する画像の形を指定します。四角、丸角四角、丸の中から選択が可能です。
画像のラベルテキストの表示・非表示を切り替えます。
トグルスイッチをOFFにすると、画像にラベルが表示されなくなりますが、画像本体に影響はありません。
以下の項目で表示を調整できます。
ラベル整列
ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。
ラベル位置
ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。
ラベル横幅
ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。
利用できるオブジェクトとプロパティは、 で確認できます。
{{}} 構文については、 のページを参照してください。
