Dropdown Select
DropdownSelectを使用すると、リスト内に検索機能や複数選択機能を実装できます。メインウィジェットにバインドする必要があります。
DropdownSelectでは、リストよりも優れたユーザーエクスペリエンスを提供できるため、拡張コンボボックスやリストボックスをフォームで使用する必要がある場合に使用します。
使用方法
アプリケーションにDropdownSelectを追加するには、以下の手順を実行します。
-
メインエディタでCombo BoxまたはList Boxを配置します。これがメインウィジェットです。
-
メインウィジェットのNameプロパティに必ず値を入力します。
-
DropdownSelectパターンをメインウィジェットの横のプレビューにドラッグします。
-
メインウィジェットに対応するプロパティペインの必須値
WidgetIdを設定します。 -
外側のコンテナの幅を調整して、ウィジェット幅を調整します。
このパターンの動作は、バインドの方法によって異なります。
- Combo Boxウィジェットにバインドした場合、DropdownSelectは選択可能なドロップダウンとして機能します。
- List Boxにバインドした場合、DropdownSelectは削除可能なタグを含む複数選択として機能します。
入力パラメータ
| 入力名 | 説明 | 型 | 必須 | デフォルト値 |
|---|---|---|---|---|
| WidgetId | 要素の表示をトリガーする要素名（Combo BoxおよびList Box）。 | Text | True | none |
| NoResultsText | 結果がない場合に表示するテキスト。 | Text | False | "No results found." |
| SearchEnabled | falseに設定した場合、検索機能が削除されます。ListBoxでは機能しません。 | Boolean | False | True |
| SearchResultsLimit | 表示される結果数の制限。 | Long Integer | False | 10 |
| AdvancedFormat | 入力によって提供されるもの以外の追加オプションを使用できます。追加オプションについては、Choicesライブラリをご覧ください。例: { searchPlaceholderValue: 'Search' } |
Text | False | {} |
| ExtendedClass | クラスを設定します。これを使用すると、画面内で他のすべてのComboBox/ListBoxをバインドできます。 | Text | False | "" |
レイアウトおよびクラス
CSSセレクタ
| 要素 | CSSクラス | 説明 |
|---|---|---|
| Dropdown | .choices__list--dropdown.is-active | ドロップダウンが閉じているか開いているかを定義します。 |
高度なユースケース
枠線の色を変更する
CSSエディタで以下のCSSを記述し、yourcolor変数を変更します。
.choices__inner {
border: var(--border-size-s) solid yourcolor;
}
または、CSS変数var(--color-yourcolor)を使用します。例:
.choices__inner {
border: var(--border-size-s) solid var(--color-yourcolor);
}
削除可能なタグの色を変更する
CSSエディタで以下のCSSを記述し、yourcolor変数を変更します。
.choices__list--multiple .choices__item.choices__item--selectable {
background: yourcolor;
}
または、CSS変数var(--color-yourcolor)を使用します。例:
.choices__list--multiple .choices__item.choices__item--selectable {
background: var(--color-yourcolor);
}
ブラウザのプレビュー
Combo Boxを使用:
List Boxを使用:
注記
SearchEnabledパラメータは、ListBoxでは機能しません。