React Dropdown List (ドロップダウン リスト) コンポーネントの概要
機能豊富な React ドロップダウン リストは、すぐに使用できるフィルタリング、アクセシビリティ、事前選択された値、柔軟なデータ バインディング、グループ化、UI カスタマイズなどを提供します。このコンポーネントが実際に行うことは、HTML 選択タグを効果的かつ簡単に置き換えることであり、ユーザーは事前定義されたいくつかのオプションのセットから編集不可能な値をすばやく選択できます。
Ignite UI for React ドロップダウン コンポーネントは、事前定義された値のトグル リストを表示し、ユーザーが 1 つのオプション項目をクリックして簡単に選択できるようにします。React ドロップダウン メニューとして機能するようにすばやく構成することも、データをグループ化してより有用な視覚情報を提供するために使用することもできます。また、グループ化を使用すると、フラット データと階層データの両方を使用できます。
当社のコンポーネントを使用すると、プロジェクトに必要なすべての機能とカスタマイズ オプション (スタイルのカスタマイズ、React ドロップダウン配置オプション、テンプレート、およびヘッダー、フッター、本文、リストなどに表示されるものと方法を変更する機能) を取得できます。
React Dropdown の例
次の React ドロップダウン リストの例は、3 つの基本的なオプションから選択できる単純なインタラクティブな React ドロップダウン メニューを実際に使用する方法を示しています。この React ドロップダウン リストの例で実際の動作をご覧ください。
Ignite UI for React で Dropdown List を使用する方法
まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:
npm install igniteui-react
次に、以下のように、IgrDropdown とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:
import { IgrDropdownModule, IgrDropdown } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrDropdownModule.register();
Ignite UI for React の完全な概要については、作業の開始トピックを参照してください。
<IgrDropdown>
<div slot="target">
<IgrButton><span>Options</span></IgrButton>
</div>
<IgrDropdownItem><span>Option 1</span></IgrDropdownItem>
<IgrDropdownItem><span>Option 2</span></IgrDropdownItem>
<IgrDropdownItem><span>Option 3</span></IgrDropdownItem>
</IgrDropdown>
Target (ターゲット)
React ドロップダウン リストは、ターゲットに対して相対的に配置されます。target スロットを使用すると、クリック時に open プロパティを切り替える組み込みコンポーネントを提供できます。場合によっては、外部ターゲットを使用するか、別のイベントを使用してドロップダウンの開始を切り替えることができます。これは、ターゲットをパラメーターとして提供できる showTarget、hide、および toggleTarget メソッドを使用して実現できます。デフォルトでは、ドロップダウン リストは CSS の absolute 位置を使用します。ターゲット要素が固定コンテナー内にあるが、ドロップダウンがそうではない場合、React ドロップダウンの IgrPositionStrategy を fixed に設定する必要があります。ドロップダウン リストは、その内容に基づいて自動的にサイズ変更されます。リストの幅をターゲットと同じにする場合は、sameWidth プロパティを true に設定する必要があります。
位置
React ドロップダウンの優先配置は、placement プロパティを使用して設定できます。ドロップダウンのデフォルトの配置は bottom-start です。flip プロパティは、指定された配置でドロップダウンを表示するのに十分なスペースがない場合に配置を反転するかどうかを決定します。React ドロップダウン リストからそのターゲットまでの距離は、distance プロパティを使用して指定できます。
選択
ユーザーが項目を選択すると、IgrDropdown は Change イベントを発行します。ドロップダウンの select メソッドを使用すると、インデックスまたは値で項目を選択できます。
Item (項目)
IgrDropdownItem は、ドロップダウン リストで選択可能な項目を表します。selected プロパティを設定することにより、選択した項目を事前定義できます。disabled プロパティを使用して、項目を無効にして選択できないようにすることもできます。IgrDropdownItem には、項目のコンテンツを指定できるデフォルトのスロットがあります。prefix スロットと suffix スロットを使用して、コンテンツの前後に描画されるカスタム コンテンツを提供することもできます。value プロパティを使用すると、項目にカスタム値を提供できます。value が設定されていない場合は、項目のテキスト コンテンツに解決されます。
Header (ヘッダー)
IgrDropdownHeader を使用して、項目のグループのヘッダーを提供できます。
Group (グループ)
React ドロップダウンの項目は、IgrDropdownGroup を使用してグループ化することもできるため、ユーザーは個別のカテゴリを簡単に区別できます。この React ドロップダウン リストの例で実際の動作をご覧ください。
Scroll Strategy (スクロール方法)
scrollStrategy プロパティは、ターゲット要素のコンテナーをスクロールする際のコンポーネントの動作を決定します。デフォルト値は scroll です。これは、ドロップダウンがターゲットとともにスクロールされることを意味します。プロパティを block に設定すると、ドロップダウンが開いている場合にスクロールがブロックされます。プロパティを close ように設定することもできます。これは、スクロール時にドロップダウンが自動的に閉じられることを意味します。
Keep Open (開いたままにする)
デフォルトでは、ユーザーがドロップダウンの外側をクリックするか項目を選択すると、ドロップダウンは自動的に閉じられます。keepOpenOnOutsideClick プロパティと keepOpenOnSelect プロパティを使用して、この動作を防ぐことができます。
スタイル設定
公開された CSS 部分を使用して、ドロップダウンとその項目の外観を変更できます。IgrDropdown は base 部分と list 部分を公開し、IgrDropdownItem は prefix、content、suffix 部分を公開し、IgrDropdownGroup は label 部分を公開します。