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

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

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

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

Web Components Dropdown の例

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

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

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

npm install igniteui-webcomponents

import {
    defineComponents,
    IgcDropdownComponent
} from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDropdownComponent);

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

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

<igc-dropdown>
    <igc-button slot="target">Options</igc-button>
    <igc-dropdown-item>Option 1</igc-dropdown-item>
    <igc-dropdown-item>Option 2</igc-dropdown-item>
    <igc-dropdown-item>Option 3</igc-dropdown-item>
</igc-dropdown>

Target (ターゲット)

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

位置

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

選択

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

Item (項目)

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

Header (ヘッダー)

DropdownHeader を使用して、項目のグループのヘッダーを提供できます。

Group (グループ)

Web Components ドロップダウンの項目は、DropdownGroup を使用してグループ化することもできるため、ユーザーは個別のカテゴリを簡単に区別できます。この Web Components ドロップダウン リストの例で実際の動作をご覧ください。

Scroll Strategy (スクロール方法)

ScrollStrategy プロパティは、ターゲット要素のコンテナーをスクロールする際のコンポーネントの動作を決定します。デフォルト値は scroll です。これは、ドロップダウンがターゲットとともにスクロールされることを意味します。プロパティを block に設定すると、ドロップダウンが開いている場合にスクロールがブロックされます。プロパティを close ように設定することもできます。これは、スクロール時にドロップダウンが自動的に閉じられることを意味します。

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

デフォルトでは、ユーザーがドロップダウンの外側をクリックするか項目を選択すると、ドロップダウンは自動的に閉じられます。KeepOpenOnOutsideClick プロパティと KeepOpenOnSelect プロパティを使用して、この動作を防ぐことができます。

スタイル設定

公開された CSS パーツを使用して、ドロップダウンとその項目の外観を変更できます。Dropdown は base パーツと list パーツを公開し、DropdownItem は prefix、content、suffix パーツを公開し、DropdownGroup は 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 リファレンス

その他のリソース

• Ignite UI for Web Components フォーラム (英語)
• Ignite UI for Web Components GitHub (英語)