Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

Dropdown Select

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

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

使用方法

アプリケーションにDropdownSelectを追加するには、以下の手順を実行します。

  1. メインエディタでCombo BoxまたはList Boxを配置します。これがメインウィジェットです。

  2. メインウィジェットのNameプロパティに必ず値を入力します。

  3. DropdownSelectパターンをメインウィジェットの横のプレビューにドラッグします。

  4. メインウィジェットに対応するプロパティペインの必須値WidgetIdを設定します。

  5. 外側のコンテナの幅を調整して、ウィジェット幅を調整します。

このパターンの動作は、バインドの方法によって異なります。

  • 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では機能しません。

  • Was this article helpful?