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
部分を公開します。