Select
最終更新
最終更新
Selectは主にフォームの送信や表示の際に使う選択用のコンポーネントです。Dashcombが提供しているSelectboxは、通常のHTMLのSelectboxをベースにしています。なので、管理画面の用途に合わせて、簡単なバリデーション機能を内蔵しています。
バリデーション機能は入力必須（単一選択の場合）、最小選択数や最大選択数（複数選択の場合）を含みます。
Selectコンポーネントには、以下のプロパティが含まれています。
Selectオブジェクトの変数名です。Selectコンポーネントをドラッグ＆ドロップすると、そのオブジェクトが自動的に select1、select2... と名付けられます。
ここで設定した変数名は、構文 {{オブジェクト名.プロパティ}} でオブジェクトを参照するために利用できます。
（例）{{select1.value}} で select1 の表示状態の真偽値を取得することができます。
利用できるオブジェクトとプロパティは、インスペクターメニュー で確認できます。
トグルスイッチをONにすると、セレクトが非表示になります。
トグルスイッチをONにすると、セレクトが無効になります。
入力必須
トグルスイッチをONにすると、セレクトが入力必須になります。
セレクトの項目名を表すラベルテキストです。Selectコンポーネントをドラッグ＆ドロップすると、ラベル文字が自動的に Select に設定されます。
Select を任意の文字列に入れ替えることはもちろん、構文 {{オブジェクト名.プロパティ}} を入れることにより、動的に設定することができます。
{{}} 構文については、オブジェクトやデータの参照 のページを参照してください。
セレクトのプレースホルダーです。セレクトに何も入力されていない場合に、入力例として表示されます。
通常のhtmlのSelectbox要素のplaceholder属性に該当します。
現在の設定値は、{{オブジェクト名.placeholder}} で参照できます。
セレクトの初期値です。画面を開いた時点で、value 属性に自動的に設定される値を指定します。初期値は value1 で、変数 select.value の値は value1になります。
{{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。
（例）オブジェクト select2 のデフォルト値に {{select1.value}} を入力することによって、select1 に入力した内容がリアルタイムで select2 に反映することができます。
現在の設定値は、{{オブジェクト名.defaultValue}} で参照できます。
オプション
選択肢の詳細な設定を変更できます。Selectのオプションの初期値は下記のようなJSON式の配列になっています。
上記のように値を固定的する設定以外にも、 {{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。
（例）オブジェクト select2 のオプションに {{select1.options}} を入力することによって、select1 のオプションがリアルタイムで select2 に反映することができます。
トグルスイッチをONにすると、セレクトボックスの複数選択が可能になります。初期はOFFで、単一選択状態です。
ONにして、option1、option2 を選択すると、変数 select.value の値は ["value1","value2"]という文字列の配列になります。
最小選択数
選択肢の数の下限です。
最大選択数
選択肢の数の上限です。
上記のように値を固定的する設定以外にも、 ${オブジェクト名.プロパティ} 構文を用いて、動的に設定することができます。
Select コンポーネントのアクションは、以下を設定することができます。
セレクトボックスのonChange イベントの発生時（Selectの入力内容が変更された時）に、指定アクションを実行できます。
onForcus
セレクトボックスのonForcus イベントの発生時（Selectがフォーカス状態になった時）に、指定アクションを実行できます。
onBlur
セレクトボックスのonBlur イベントの発生時（Selectがフォーカス状態でなくなった時）に、指定アクションを実行できます。
セレクトボックスラベルの表示・非表示を切り替えます。
トグルスイッチをOFFにすると、セレクトボックスラベルが表示されなくなりますが、セレクトボックス本体に影響はありません。
以下の項目で表示を調整できます。
| 項目名 | 設定内容 |
|---|---|
ラベル整列 | ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。 |
ラベル位置 | ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。 |
ラベル横幅 | ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。 |
