Dropdown

ドロップダウン（別名セレクト）は、オプションのコレクションから項目を選択するために使用されます。

インポート#


import { Dropdown } from 'primereact/dropdown';
         

基本#

ドロップダウンは、value および onChange プロパティと、options コレクションを持つ制御されたコンポーネントとして使用されます。オプションのラベルと値は、それぞれ optionLabel と optionValue で定義されます。プロパティ。optionLabel のデフォルトのプロパティ名は label で、optionValue のデフォルトのプロパティ名は value です。optionValue が省略され、オブジェクトに value プロパティがない場合、オブジェクト自体がオプションの値になります。オプションが文字列配列のような単純なプリミティブ値である場合、optionLabel と optionValue は必要ないことに注意してください。

都市を選択

<Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
    placeholder="Select a City" className="w-full md:w-14rem" />
         

チェックマーク#

選択したオプションを強調表示する別の方法は、代わりにチェックマークを表示することです。

都市を選択

<Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
    placeholder="Select a City" className="w-full md:w-14rem" checkmark={true}  highlightOnSelect={false} />
         

編集可能#

editable が存在する場合、入力はタイピングでも入力できます。


<Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
    editable placeholder="Select a City" className="w-full md:w-14rem" />
         

グループ#

ネストされたデータ構造が提供されると、オプションをグループ化できます。グループのラベルを定義するには、optionGroupLabel プロパティが必要であり、グループの子を参照するプロパティを定義するために optionGroupChildren も必要です。

都市を選択

<Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={groupedCities} optionLabel="label" 
    optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupedItemTemplate} className="w-full md:w-14rem" placeholder="Select a City" />
         

テンプレート#

オプションと選択したオプションの表示は、それぞれ itemTemplate および valueTemplate プロパティを使用してテンプレートをサポートします。

国を選択

<Dropdown value={selectedCountry} onChange={(e) => setSelectedCountry(e.value)} options={countries} optionLabel="name" placeholder="Select a Country" 
    valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" panelFooterTemplate={panelFooterTemplate}
    dropdownIcon={(opts) => {
        return opts.iconProps['data-pr-overlay-visible'] ? <ChevronRightIcon {...opts.iconProps} /> : <ChevronDownIcon {...opts.iconProps} />;
    }} 
/>
         

フィルター#

ドロップダウンは、filter プロパティを追加することで有効になる組み込みのフィルタリングを提供します。

国を選択

<Dropdown value={selectedCountry} onChange={(e) => setSelectedCountry(e.value)} options={countries} optionLabel="name" placeholder="Select a Country" 
    filter valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" />
         

クリアアイコン#

showClear が有効になっている場合、ドロップダウンをリセットするためのクリアアイコンが追加されます。

都市を選択

<Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
    showClear placeholder="Select a City" className="w-full md:w-14rem" />
         

ローディング状態#

ローディング状態は loading プロパティを使用できます。

読み込み中...

<Dropdown loading placeholder="Loading..." className="w-full md:w-14rem" />
         

仮想スクロール#

VirtualScroller は、このデモで 100K レコードのような長いオプションリストを効率的にレンダリングするために使用されます。構成は virtualScrollerOptions プロパティで行われます。利用可能なオプションの詳細については、 VirtualScroller を参照してください。これはドロップダウンによって内部的に使用されます。

項目を選択

<Dropdown value={selectedItem} onChange={(e) => setSelectedItem(e.value)} options={items} virtualScrollerOptions={{ itemSize: 38 }} 
    placeholder="Select Item" className="w-full md:w-14rem" />
         

遅延仮想スクロール#

項目を選択

<Dropdown value={selectedItem} onChange={(e) => setSelectedItem(e.value)} options={items} virtualScrollerOptions={{ itemSize: 38 }} 
    placeholder="Select Item" className="w-full md:w-14rem" />
         

フロートラベル#

フォーカス時に入力フィールドの上にフロートラベルが表示されます。

 

<FloatLabel>
    <Dropdown inputId="dd-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
    <label htmlFor="dd-city">Select a City</label>
</FloatLabel>
         

塗りつぶし#

variant プロパティを filled として指定して、デフォルトの outlined スタイルよりも高い視覚的強調でコンポーネントを表示します。

都市を選択

<Dropdown variant="filled" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
    placeholder="Select a City" className="w-full md:w-14rem" />
         

無効#

無効な状態は、検証の失敗を示すために invalid プロップを使用して表示されます。フォーム検証ライブラリと統合するときにこのスタイルを使用できます。

都市を選択

<Dropdown invalid value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
    placeholder="Select a City" className="w-full md:w-14rem" />
         

無効#

disabled が存在する場合、要素は編集およびフォーカスできません。

都市を選択

<Dropdown disabled placeholder="Select a City" className="w-full md:w-14rem" />
         

アクセシビリティ#

スクリーンリーダー

コンポーネントを説明する値は、aria-labelledby または aria-label プロップを使用して指定できます。ドロップダウン要素には、aria-haspopup および aria-expanded 属性に加えて combobox ロールがあります。編集可能なオプションが有効になっている場合は、aria-autocomplete も追加されます。コンボボックスとポップアップの関係は aria-controls で作成され、aria-activedescendant 属性は、ポップアップリスト内のキーボードナビゲーション中に読み取るオプションをスクリーンリーダーに指示するために使用されます。

ポップアップリストには、combobox 要素の aria-controls 属性を参照する ID があり、ロールとして listbox を使用します。各リスト項目には、option ロール、aria-activedescendant と一致する ID がありますaria-label、aria-selected、および aria-disabled 属性とともに、入力要素があります。

フィルタリングが有効になっている場合、フィルター入力要素に aria-* プロップを与えるために filterInputProps を定義できます。


<span id="dd1">Options</span>
<Dropdown aria-labelledby="dd1" />

<Dropdown aria-label="Options" />
     

クローズ状態のキーボードサポート

キー機能
tabフォーカスをドロップダウン要素に移動します。
spaceポップアップを開き、選択したオプションに視覚的なフォーカスを移動します。ない場合は、最初のオプションにフォーカスが移動します。
下矢印ポップアップを開き、選択したオプションに視覚的なフォーカスを移動します。ない場合は、最初のオプションにフォーカスが移動します。
上矢印ポップアップを開き、選択したオプションに視覚的なフォーカスを移動します。ない場合は、最後のオプションにフォーカスが移動します。

ポップアップキーボードサポート

キー機能
tabフォーカスをポップアップ内の次のフォーカス可能な要素に移動します。ない場合は、最初のフォーカス可能な要素にフォーカスが移動します。
shift + tabフォーカスをポップアップ内の前のフォーカス可能な要素に移動します。ない場合は、最後のフォーカス可能な要素にフォーカスが移動します。
enterフォーカスされたオプションを選択して、ポップアップを閉じます。
spaceフォーカスされたオプションを選択して、ポップアップを閉じます。
escapeポップアップを閉じ、フォーカスをドロップダウン要素に移動します。
下矢印フォーカスを次のオプションに移動します。ない場合、視覚的なフォーカスは変わりません。
上矢印フォーカスを前のオプションに移動します。ない場合、視覚的なフォーカスは変わりません。
右矢印ドロップダウンが編集可能な場合、現在のオプションから視覚的なフォーカスを削除し、入力カーソルを左に 1 文字移動します。
左矢印ドロップダウンが編集可能な場合、現在のオプションから視覚的なフォーカスを削除し、入力カーソルを右に 1 文字移動します。
homeドロップダウンが編集可能な場合は、入力カーソルを最後に移動します。そうでない場合は、最初のオプションにフォーカスを移動します。
endドロップダウンが編集可能な場合は、入力カーソルを先頭に移動します。そうでない場合は、最後のオプションにフォーカスを移動します。
印刷可能な文字ドロップダウンが編集可能でない場合、入力された文字で始まるラベルを持つオプションにフォーカスを移動します。

フィルター入力キーボードサポート

キー機能
enterポップアップを閉じ、フォーカスをドロップダウン要素に移動します。
escapeポップアップを閉じ、フォーカスをドロップダウン要素に移動します。
                                  PrimeReact 10.8.3 (作成: PrimeTek)