Checkbox

Checkboxは主にフォームの送信や表示の際に使う複数選択用のコンポーネントです。Dashcombが提供しているCheckboxは、通常のHTMLのCheckboxをベースにして、管理画面の用途に合わせており、簡単なバリデーション機能を内蔵しています。

バリデーション機能は入力必須、最小選択数、最大選択数などを含みます。

プロパティ

Checkboxコンポーネントには、以下のプロパティが含まれています。

共通

オブジェクト

チェックボックスオブジェクトの変数名です。Checkboxをドラッグ＆ドロップすると、そのオブジェクトが自動的に checkbox1、checkbox2... と名付けられます。

ここで設定した変数名は、構文{{オブジェクト名.プロパティ}} でオブジェクトを参照するために利用できます。

（例）{{checkbox1.value}} で checkbox1 の値を取得することができます。

利用できるオブジェクトとプロパティは、インスペクターメニュー で確認できます。

非表示

トグルスイッチをONにすると、チェックボックスが非表示になります。

無効

トグルスイッチをONにすると、チェックボックスが無効になります。

入力必須

トグルスイッチをONにすると、チェックボックスが必須入力になります。

データ

ラベル文字

チェックボックスの項目名を表すラベルテキストです。Checkbox コンポーネントをドラッグ＆ドロップすると、自動的に Checkbox に設定されます。

{{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。

{{}} 構文については、オブジェクトやデータの参照 のページを参照してください。

デフォルト値

チェックボックスの初期値です。["value2","value3"] に設定されており、変数 checkbox.value の値は ["value2","value3"]という配列になります。

{{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。

（例）オブジェクト checkbox2 のデフォルト値に {{checkbox1.value}} を入力することによって、checkbox1 に入力した内容がリアルタイムで checkbox2 に反映することができます。

現在の設定値は、{{オブジェクト名.defaultValue}} で参照できます。

オプション

選択肢の詳細な設定を変更できます。Checkboxのオプションの初期値は下記のようなJSON式の配列になっています。

 [
   { "label": "option1", "value": "value1" },
   { "label": "option2", "value": "value2", "disabled": true },
   { "label": "option3", "value": "value3" }
 ]

上記のように値を固定的する設定以外にも、 {{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。

（例）オブジェクト checkbox2 のオプションに {{checkbox1.options}} を入力することによって、checkbox1 のオプションがリアルタイムで checkbox2 に反映することができます。

最小選択数

選択数の下限です。

最大選択数

選択数の上限です。

アクション

Checkbox コンポーネントのアクションは、以下を設定することができます。

onChange

チェックボックスのonChange イベントの発生時（Checkboxの入力内容が変更された時）に、指定アクションを実行できます。

onForcus

チェックボックスのonForcus イベントの発生時（Checkboxがフォーカス状態になった時）に、指定アクションを実行できます。

onBlur

チェックボックスのonBlur イベントの発生時（Checkboxがフォーカス状態でなくなった時）に、指定アクションを実行できます。

外観

展開方向

選択肢の並び方向を指定します。

ラベル表示

チェックボックスラベルの表示・非表示を切り替えます。

トグルスイッチをOFFにすると、チェックボックスラベルが表示されなくなりますが、チェックボックス本体に影響はありません。

以下の項目で表示を調整できます。

項目名	設定内容
ラベル整列	ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。
ラベル位置	ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。
ラベル横幅	ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。