ピックリスト

PickListは、異なるリスト間でアイテムを並べ替えるために使用されます。

インポート#


import { PickList } from 'primereact/picklist';

基本#

OrderListは、source、target、onChangeプロパティを持つ制御された入力として使用されます。リストアイテムの内容は、リスト内のオブジェクトをパラメータとして受け取るitemTemplateプロパティで定義する必要があります。

利用可能

選択済み


<PickList dataKey="id" source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} breakpoint="1280px"
    sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '24rem' }} targetStyle={{ height: '24rem' }} />

フィルター#

アイテムは、filterプロパティを有効にすることで入力フィールドを使用してフィルター処理されます。フィルター値は、filterByプロパティで構成されたオブジェクトのプロパティに対してチェックされ、filterMatchModeプロパティで一致モード（例：contains）が指定されます。 filterMatchMode 例：contains。

利用可能

選択済み


<PickList dataKey="id" source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} filter filterBy="name" breakpoint="1280px"
    sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '24rem' }} targetStyle={{ height: '24rem' }}
    sourceFilterPlaceholder="Search by name" targetFilterPlaceholder="Search by name" />

アクセシビリティ#

スクリーンリーダー

ソースリストボックスとターゲットリストボックスを記述する値は、aria-labelledbyまたはaria-labelプロパティを渡すことで、sourceListPropsとtargetListPropsを使用して提供できます。リスト要素は、aria-multiselectable属性を持つlistboxロールを持ちます。各リストアイテムは、aria-selectedとaria-disabled属性を持つoptionロールを持ちます。

コントロールボタンは、デフォルトではロケールAPIのaria.moveTop、aria.moveUp、aria.moveDown、aria.moveBottom、aria.moveTo、aria.moveAllTo、 aria.moveFrom、aria.moveAllFromプロパティを参照するaria-labelを持つbutton要素です。または、moveTopButtonProps、moveUpButtonProps、moveDownButtonProps、moveToButtonProps、moveAllToButtonProps、moveFromButtonProps、moveFromButtonProps、moveAllFromButtonPropsを使用して、デフォルトのaria-label属性を上書きするなど、ボタンをカスタマイズできます。


<span id="lb">Options</span>
<OrderList aria-labelledby="lb" />

<OrderList aria-label="City" />

リストボックスのキーボードサポート

キー	機能
tab	フォーカスを最初の選択済みオプションに移動します。選択済みオプションがない場合は、最初のオプションにフォーカスが移動します。
上矢印	フォーカスを前のオプションに移動します。
下矢印	フォーカスを次のオプションに移動します。
Enter	フォーカスされているオプションの選択状態を切り替えます。
スペース	フォーカスされているオプションの選択状態を切り替えます。
Home	フォーカスを最初のオプションに移動します。
End	フォーカスを最後のオプションに移動します。
Shift + 下矢印	フォーカスを次のオプションに移動し、選択状態を切り替えます。
Shift + 上矢印	フォーカスを前のオプションに移動し、選択状態を切り替えます。
Shift + スペース	最後に選択されたオプションとフォーカスされているオプションの間のアイテムを選択します。
Ctrl + Shift + Home	フォーカスされているオプションと、最初のオプションまでのすべてのオプションを選択します。
Ctrl + Shift + End	フォーカスされているオプションと、最初のオプションからのすべてのオプションを選択します。
Ctrl + a	すべてのオプションを選択します。

ボタンのキーボードサポート

キー	機能
Enter	ボタンのアクションを実行します。
スペース	ボタンのアクションを実行します。