Skip to main content

 

パターン

 

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

 

OutSystems

ドロップダウン

エンドユーザーが複数のオプションから選択することができます。

Dropdownは、5つ以上のオプションの選択肢を提供するために使用します。オプションの数が非常に多い場合は、コンテキストが失われないようにするため、Dropdown Selectを使用することを検討してください。

使用方法

Dropdownのラベルを入力し、[DropdownList]プレースホルダに必要なリンクを追加します。

  1. Dropdownパターンをプレビューにドラッグします。

  2. プレースホルダでコンテンツを設定します。

  3. パブリッシュしてテストします。

入力パラメータ

入力名 説明 必須 デフォルト値
ExtendedClass このブロックにカスタムスタイルクラスを追加します。Text False なし

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
.dropdown .is--hidden ドロップダウンリストを閉じるかどうかを定義します
.dropdown .is--visible ドロップダウンリストを開くかどうかを定義します

高度なユースケース

ListRecordsを使用してリンクのリストを作成する

  1. Dropdownパターンをページにドラッグします。

  2. [DropdownList]プレースホルダに、ListRecordsウィジェットをドラッグします。

  3. ListRecordsウィジェットのLine Separatorプロパティを「None」に設定します。
  4. ListRecordsウィジェットに、リンクをドラッグして必要なリンク先に接続します。
  5. リスト内で、Expressionを使用してコンテンツを表示します。
  6. [Prompt]プレースホルダで、プロンプトとして定義するテキストを設定します。
  7. パブリッシュしてテストします。

  • Was this article helpful?