PickList

PickListは、異なるリスト間でアイテムの順序を変更するために使用されます。

インポート #


import PickList from 'primevue/picklist';

基本 #

PickListは、v-modelディレクティブでバインドされた多次元配列と、optionインスタンスとインデックスをslotProps経由で取得するコンテンツのテンプレートを必要とします。

利用可能なオプションがありません選択されたアイテムがありません


<PickList v-model="products" dataKey="id" breakpoint="1400px">
    <template #option="{ option  }">
        {{ option.name }}
    </template>
</PickList>

テンプレート #

カスタムコンテンツのサポートには、アイテムインスタンスをパラメーターとして取得するoptionテンプレートを定義します。さらに、sourceheaderとtargetheaderスロットが提供され、カスタマイズが可能です。

利用可能なオプションがありません選択されたアイテムがありません


<PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
    <template #option="{ option , selected }">
        <div class="flex flex-wrap p-1 items-center gap-4 w-full">
            <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
            <div class="flex-1 flex flex-col">
                <span class="font-medium text-sm">{{ option.name }}</span>
                <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
            </div>
            <span class="font-bold">${{ option.price }}</span>
        </div>
    </template>
</PickList>

アクセシビリティ #

スクリーンリーダー

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

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


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

<PickList aria-label="City" />

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

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

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

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