Skip to main content

 

UIを設計する

 

OutSystems

Dropdown Selectパターン

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

使用タイミング

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

使用方法

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

  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 なし
NoResultsText 結果がない場合に表示するテキスト。 Text False "No results found."
SearchEnabled [false]に設定した場合、検索機能が削除されます。 Boolean False True
SearchResultsLimit 表示される結果数の制限。 Long Integer False 10
AdvancedFormat 入力によって提供されるもの以外の追加オプションを使用できます。追加オプションについては、Choicesライブラリをご覧ください。例: { searchPlaceholderValue:'Search' } Text False "

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
Dropdown .choices__list--dropdown.is-active ドロップダウンが閉じているか開いているかを定義します。

画面テンプレートでの例

以下は、このパターンを使用した画面テンプレートです。

  • ListWithFilters
  • ProductDetail
  • SimpleForm
  • ThreeColumnGallery

高度な設定

以下にこのパターンの高度な設定の例をいくつか示します。使用できる色を確認します。

枠線の色を変更する

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を使用:

  • Was this article helpful?