OrderList

OrderList は、コレクションをソートするために使用されます。

インポート#


import { OrderList } from 'primereact/orderlist';

基本#

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

製品


<OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>

フィルター#

項目は、filter プロパティを有効にすることで、入力フィールドを使用してフィルター処理されます。フィルター値は、filterBy プロパティで構成されたオブジェクトのプロパティと、フィルターマッチモードと照合され、 filterMatchMode (例: contains)。

製品


<OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name"></OrderList>

ドラッグアンドドロップ#

dragdrop プロパティを有効にすることで、ドラッグアンドドロップを使用して項目を並べ替えることができます。

製品


<OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} 
    header="Products" dragdrop></OrderList>

アクセシビリティ#

スクリーンリーダー

リストボックスを説明するための値は、aria-labelledby または aria-label プロパティを渡すことによって、listProps で指定できます。リスト要素には、aria-multiselectable 属性を持つ listbox ロールがあります。各リスト項目には、aria-selected および aria-disabled が属性として設定された option ロールがあります。

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


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

<OrderList aria-label="City" />

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

キー	機能
tab	フォーカスが最初に選択されたオプションに移動します。選択されたオプションがない場合は、最初のオプションにフォーカスが移動します。
上矢印	フォーカスが前のオプションに移動します。
下矢印	フォーカスが次のオプションに移動します。
enter	フォーカスされたオプションの選択状態を切り替えます。
space	フォーカスされたオプションの選択状態を切り替えます。
home	フォーカスが最初のオプションに移動します。
end	フォーカスが最後のオプションに移動します。
shift + 下矢印	フォーカスが次のオプションに移動し、選択状態を切り替えます。
shift + 上矢印	フォーカスが前のオプションに移動し、選択状態を切り替えます。
shift + space	最後に選択されたオプションとフォーカスされたオプションの間の項目を選択します。
control + shift + home	フォーカスされたオプションと最初のオプションまでのすべてのオプションを選択します。
control + shift + end	フォーカスされたオプションと最初のオプションまでのすべてのオプションを選択します。
control + a	すべてのオプションを選択します。

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

キー	機能
enter	ボタンのアクションを実行します。
space	ボタンのアクションを実行します。