# Switch

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

## プロパティ

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

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-da67f180c03351bd880b459af1ae36627dfddc0a%2FUI%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%EF%BC%9A%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81.png?alt=media" alt=""><figcaption></figcaption></figure>

### 共通 <a href="#common" id="common"></a>

#### **オブジェクト**

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

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

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

利用できるオブジェクトとプロパティは、[インスペクターメニュー](https://docs.dashcomb.com/dashcomb-help-center/ide/region/inspector-region) で確認できます。

#### 非表示

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

#### 無効

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

### データ <a href="#data" id="data"></a>

#### ラベル文字

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

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

{% hint style="info" %}
`{{}}` 構文については、[オブジェクトやデータの参照](https://docs.dashcomb.com/dashcomb-help-center/ide/obujekutoyadtano) のページを参照してください。
{% endhint %}

#### デフォルト値

スイッチの初期値です。画面を開いた時点での初期値は`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がフォーカス状態でなくなった時）に、指定アクションを実行できます。

### 外観 <a href="#appearance" id="appearance"></a>

**ラベル**

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

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

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

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