ドロップダウン
エンドユーザーが複数のオプションから選択することができます。
Dropdownは、5つ以上のオプションの選択肢を提供するために使用します。オプションの数が非常に多い場合は、コンテキストが失われないようにするため、Dropdown Selectを使用することを検討してください。
使用方法
Dropdownのラベルを入力し、［DropdownList］プレースホルダに必要なリンクを追加します。
-
Dropdownパターンをプレビューにドラッグします。
-
プレースホルダでコンテンツを設定します。
- パブリッシュしてテストします。
入力パラメータ
| 入力名 | 説明 | 型 | 必須 | デフォルト値 |
|---|---|---|---|---|
| ExtendedClass | このブロックにカスタムスタイルクラスを追加します。Text | False | なし |
レイアウトおよびクラス
CSSセレクタ
| 要素 | CSSクラス | 説明 |
|---|---|---|
| .dropdown | .is--hidden | ドロップダウンリストを閉じるかどうかを定義します |
| .dropdown | .is--visible | ドロップダウンリストを開くかどうかを定義します |
高度なユースケース
ListRecordsを使用してリンクのリストを作成する
-
Dropdownパターンをページにドラッグします。
-
［DropdownList］プレースホルダに、ListRecordsウィジェットをドラッグします。
- ListRecordsウィジェットのLine Separatorプロパティを「None」に設定します。
- ListRecordsウィジェットに、リンクをドラッグして必要なリンク先に接続します。
- リスト内で、Expressionを使用してコンテンツを表示します。
- ［Prompt］プレースホルダで、プロンプトとして定義するテキストを設定します。
- パブリッシュしてテストします。
