Switch
Switchは主にフォームの送信や表示の際に使う論理型入力や表示用のコンポーネントです。Dashcombが提供しているSwitchは、通常のHTMLのToggle Switchを使い、管理画面の用途に合わせて、作り上げた機能です。
プロパティ
Switchコンポーネントには、以下のプロパティが含まれています。
共通
オブジェクト
スイッチオブジェクトの変数名です。Switchをドラッグ＆ドロップすると、そのオブジェクトが自動的に switch1、switch2... と名付けられます。
ここで設定した変数名は、構文 {{オブジェクト名.プロパティ}} でオブジェクトを参照するために利用できます。
（例）{{switch1.value}} で switch1 の値を取得することができます。
利用できるオブジェクトとプロパティは、インスペクターメニュー で確認できます。
非表示
トグルスイッチをONにすると、スイッチが非表示になります。
無効
トグルスイッチをONにすると、スイッチが無効になり、入力できなくなります。
データ
ラベル文字
スイッチの項目名を表すラベルテキストです。Switch コンポーネントをドラッグ＆ドロップすると、自動的に Switch に設定されます。
{{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。
デフォルト値
スイッチの初期値です。画面を開いた時点での初期値はtrue に設定されており、変数 switch.value は true として評価されます。
false や数字以外のその他の文字列に変更すると、変数 switch.value は false として評価されます。
0 に変更すると、変数 switch.value は false として評価され、その他の数字に変更すると、true として評価されます。
{{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。
（例）オブジェクト switch2 のデフォルト値に {{switch1.value}} を入力することによって、switch1 に設定した内容をリアルタイムで switch2 に反映することができます。
現在の設定値は、{{オブジェクト名.defaultValue}} で参照できます。
デフォルト値は任意ですが、データソースの値に合わせて、true、false、0、1 のように設定すると分かりやすいです。
アクション
Switch コンポーネントのアクションは、以下を設定することができます。
onChange
スイッチのonChange イベントの発生時（Switchの入力内容が変更された時）に、指定アクションを実行できます。
onForcus
スイッチのonForcus イベントの発生時（Switchがフォーカス状態になった時）に、指定アクションを実行できます。
onBlur
スイッチのonBlur イベントの発生時（Switchがフォーカス状態でなくなった時）に、指定アクションを実行できます。
外観
ラベル
スイッチラベルの表示・非表示を切り替えます。
トグルスイッチをOFFにすると、スイッチラベルが表示されなくなりますが、スイッチ本体に影響はありません。
以下の項目で表示を調整できます。
ラベル整列
ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。
ラベル位置
ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。
ラベル横幅
ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。
最終更新