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 イベントの発生時(Switchの入力内容が変更された時)に、指定アクションを実行できます。
onForcus
スイッチのonForcus イベントの発生時(Switchがフォーカス状態になった時)に、指定アクションを実行できます。
onBlur
スイッチのonBlur イベントの発生時(Switchがフォーカス状態でなくなった時)に、指定アクションを実行できます。
ラベル
スイッチラベルの表示・非表示を切り替えます。
トグルスイッチをOFFにすると、スイッチラベルが表示されなくなりますが、スイッチ本体に影響はありません。
以下の項目で表示を調整できます。
項目名 | 設定内容 |
---|---|
ラベル整列
ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。
ラベル位置
ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。
ラベル横幅
ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。