従来のWebアプリにのみ適用されます

Dropdown Select

DropdownSelectを使用すると、リスト内に検索機能や複数選択機能を実装できます。メインウィジェットにバインドする必要があります。

DropdownSelectでは、リストよりも優れたユーザーエクスペリエンスを提供できるため、拡張コンボボックスやリストボックスをフォームで使用する必要がある場合に使用します。

使用方法

アプリケーションに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クラス	説明
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では機能しません。