Switch

Switchは主にフォームの送信や表示の際に使う論理型入力や表示用のコンポーネントです。Dashcombが提供しているSwitchは、通常のHTMLのToggle Switchを使い、管理画面の用途に合わせて、作り上げた機能です。

プロパティ

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

共通

オブジェクト

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

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

(例){{switch1.value}}switch1 の値を取得することができます。

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

非表示

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

無効

トグルスイッチをONにすると、スイッチが無効になり、入力できなくなります。

データ

ラベル文字

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

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

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

デフォルト値

スイッチの初期値です。画面を開いた時点での初期値はtrue に設定されており、変数 switch.valuetrue として評価されます。

false や数字以外のその他の文字列に変更すると、変数 switch.valuefalse として評価されます。

0 に変更すると、変数 switch.valuefalse として評価され、その他の数字に変更すると、true として評価されます。

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

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

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

デフォルト値は任意ですが、データソースの値に合わせて、truefalse01 のように設定すると分かりやすいです。

アクション

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

onChange

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

onForcus

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

onBlur

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

外観

ラベル

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

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

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

項目名設定内容

ラベル整列

ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。

ラベル位置

ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。

ラベル横幅

ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。

最終更新