React Dropdown List コンポーネント | Ignite UI for React

Open Source

機能豊富な React ドロップダウンリストは、すぐに使用できるフィルタリング、アクセシビリティ、事前選択された値、柔軟なデータバインディング、グループ化、UI カスタマイズなどを提供します。このコンポーネントが実際に行うことは、HTML 選択タグを効果的かつ簡単に置き換えることであり、ユーザーは事前定義されたいくつかのオプションのセットから編集不可能な値をすばやく選択できます。

Ignite UI for React ドロップダウンコンポーネントは、事前定義された値のトグルリストを表示し、ユーザーが 1 つのオプション項目をクリックして簡単に選択できるようにします。React ドロップダウンメニューとして機能するようにすばやく構成することも、データをグループ化してより有用な視覚情報を提供するために使用することもできます。また、グループ化を使用すると、フラットデータと階層データの両方を使用できます。

当社のコンポーネントを使用すると、プロジェクトに必要なすべての機能とカスタマイズオプション (スタイルのカスタマイズ、React ドロップダウン配置オプション、テンプレート、およびヘッダー、フッター、本文、リストなどに表示されるものと方法を変更する機能) を取得できます。

次の React ドロップダウンリストの例は、3 つの基本的なオプションから選択できる単純なインタラクティブな React ドロップダウンメニューを実際に使用する方法を示しています。この React ドロップダウンリストの例で実際の動作をご覧ください。

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react

次に、以下のように、IgrDropdown とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { IgrDropdown } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

Ignite UI for React の完全な概要については、作業の開始トピックを参照してください。

IgrDropdown の使用を開始する最も簡単な方法は次のとおりです:

<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 プロパティを切り替える組み込みコンポーネントを提供できます。場合によっては、外部ターゲットを使用するか、別のイベントを使用してドロップダウンの開始を切り替えることができます。これは、ターゲットをパラメーターとして提供できる Show、Hide、および Toggle メソッドを使用して実現できます。デフォルトでは、ドロップダウンリストは CSS の absolute 位置を使用します。ターゲット要素が固定コンテナー内にあるが、ドロップダウンがそうではない場合、React ドロップダウンの PositionStrategy を fixed に設定する必要があります。ドロップダウンリストは、その内容に基づいて自動的にサイズ変更されます。リストの幅をターゲットと同じにする場合は、SameWidth プロパティを true に設定する必要があります。

位置

React ドロップダウンの優先配置は、Placement プロパティを使用して設定できます。ドロップダウンのデフォルトの配置は bottom-start です。Flip プロパティは、指定された配置でドロップダウンを表示するのに十分なスペースがない場合に配置を反転するかどうかを決定します。React ドロップダウンリストからそのターゲットまでの距離は、Distance プロパティを使用して指定できます。

選択

ユーザーが項目を選択すると、IgrDropdown は Change イベントを発行します。ドロップダウンの Select メソッドを使用すると、インデックスまたは値で項目を選択できます。

Item (項目)

IgrDropdownItem は、ドロップダウンリストで選択可能な項目を表します。Selected プロパティを設定することにより、選択した項目を事前定義できます。Disabled プロパティを使用して、項目を無効にして選択できないようにすることもできます。IgrDropdownItem には、項目のコンテンツを指定できるデフォルトのスロットがあります。prefix スロットと suffix スロットを使用して、コンテンツの前後に描画されるカスタムコンテンツを提供することもできます。Value プロパティを使用すると、項目にカスタム値を提供できます。Value が設定されていない場合は、項目のテキストコンテンツに解決されます。

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 パーツを公開します。

igc-dropdown::part(list) {
  height: 220px;
}

igc-dropdown-item[selected] {
  background: var(--ig-success-300);
}

igc-dropdown-group::part(label) {
  display: flex;
  justify-content: center;
}

API リファレンス

IgrDropdown
IgrDropdownItem
IgrDropdownHeader
IgrDropdownGroup

Target (ターゲット)

位置

選択

Item (項目)

Header (ヘッダー)

Group (グループ)

Scroll Strategy (スクロール方法)

Keep Open (開いたままにする)

スタイル設定

API リファレンス

その他のリソース

React Dropdown List (ドロップダウン リスト) コンポーネントの概要

React Dropdown の例

Ignite UI for React で Dropdown List を使用する方法

Target (ターゲット)

位置

選択

Item (項目)

Header (ヘッダー)

Group (グループ)

Scroll Strategy (スクロール方法)

Keep Open (開いたままにする)

スタイル設定

API リファレンス

その他のリソース

React Dropdown List (ドロップダウンリスト) コンポーネントの概要