Web Components Dropdown (ドロップダウン) の概要
Web Components ドロップダウンは、事前定義された値の切り替え可能なリストを表示し、ユーザーがクリックするだけで単一のオプション項目を簡単に選択できるようにするコンポーネントです。ドロップダウン メニューとして機能するようにすばやく構成することも、データをグループ化することでより有用な視覚情報を提供するために使用することもできます。グループ化を使用すると、フラット データと階層データの両方を使用できます。
Web Components Dropdown の例
使用方法
まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:
npm install igniteui-webcomponents
import {
defineComponents,
IgcDropdownComponent,
IgcDropdownItemComponent,
IgcDropdownHeaderComponent,
IgcDropdownGroupComponent
} from "igniteui-webcomponents";
defineComponents(IgcDropdownComponent, IgcDropdownItemComponent, IgcDropdownHeaderComponent, IgcDropdownGroupComponent);
IgcDropdownComponent の使用を開始する最も簡単な方法は次のとおりです:
<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 (ターゲット)
ドロップダウン リストは、ターゲットに対して相対的に配置されます。target スロットを使用すると、クリック時に open プロパティを切り替える組み込みコンポーネントを提供できます。場合によっては、外部ターゲットを使用するか、別のイベントを使用してドロップダウンの開始を切り替えることができます。これは、ターゲットをパラメーターとして提供できる showTarget、hide、および toggleTarget メソッドを使用して実現できます。デフォルトでは、ドロップダウン リストは CSS の absolute 位置を使用します。ターゲット要素が固定コンテナー内にあるが、ドロップダウンがそうではない場合、ドロップダウンの positionStrategy を fixed に設定する必要があります。ドロップダウン リストは、その内容に基づいて自動的にサイズ変更されます。リストの幅をターゲットと同じにする場合は、sameWidth プロパティを true に設定する必要があります。
位置
ドロップダウンの優先配置は、placement プロパティを使用して設定できます。ドロップダウンのデフォルトの配置は bottom-start です。flip プロパティは、指定された配置でドロップダウンを表示するのに十分なスペースがない場合に配置を反転するかどうかを決定します。ドロップダウン リストからそのターゲットまでの距離は、distance プロパティを使用して指定できます。
選択
ユーザーが項目を選択すると、IgcDropdownComponent は igcChange イベントを発行します。ドロップダウンの select メソッドを使用すると、インデックスまたは値で項目を選択できます。
Item (項目)
IgcDropdownItemComponent は、ドロップダウン リストで選択可能な項目を表します。selected プロパティを設定することにより、選択した項目を事前定義できます。disabled プロパティを使用して、項目を無効にして選択できないようにすることもできます。IgcDropdownItemComponent には、項目のコンテンツを指定できるデフォルトのスロットがあります。prefix スロットと suffix スロットを使用して、コンテンツの前後に描画されるカスタム コンテンツを提供することもできます。value プロパティを使用すると、項目にカスタム値を提供できます。value が設定されていない場合は、項目のテキスト コンテンツに解決されます。
Header (ヘッダー)
IgcDropdownHeaderComponent を使用して、項目のグループのヘッダーを提供できます。
Group (グループ)
ドロップダウン項目は、IgcDropdownGroupComponent を使用してグループ化することもできるため、ユーザーは個別のカテゴリを簡単に区別できます。
Scroll Strategy (スクロール方法)
scrollStrategy プロパティは、ターゲット要素のコンテナーをスクロールする際のコンポーネントの動作を決定します。デフォルト値は scroll です。これは、ドロップダウンがターゲットとともにスクロールされることを意味します。プロパティを block に設定すると、ドロップダウンが開いている場合にスクロールがブロックされます。プロパティを close ように設定することもできます。これは、スクロール時にドロップダウンが自動的に閉じられることを意味します。
Keep Open (開いたままにする)
デフォルトでは、ユーザーがドロップダウンの外側をクリックするか項目を選択すると、ドロップダウンは自動的に閉じられます。keepOpenOnOutsideClick プロパティと keepOpenOnSelect プロパティを使用して、この動作を防ぐことができます。
スタイル設定
公開された CSS 部分を使用して、ドロップダウンとその項目の外観を変更できます。IgcDropdownComponent は base 部分と list 部分を公開し、IgcDropdownItemComponent は prefix、 content、suffix 部分を公開し、IgcDropdownGroupComponent は label 部分を公開します。