OrderList

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

インポート # 


import OrderList from 'primevue/orderlist';

基本 #

OrderList は、v-model ディレクティブとコンテンツのためのoption テンプレートでバインドされた配列を値として必要とします。

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

<OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
    <template #option="{ option }">
        {{ option.name }}
    </template>
</OrderList>

テンプレート #

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

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

<OrderList v-model="products" dataKey="id" breakpoint="575px" 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 sm:ml-8">${{ option.price }}</span>
        </div>
    </template>
</OrderList>

アクセシビリティ #

スクリーンリーダー

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

コントロールボタンは、デフォルトでロケール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フォーカスされたオプションの選択状態を切り替えます。
スペースフォーカスされたオプションの選択状態を切り替えます。
Homeフォーカスを最初のオプションに移動します。
Endフォーカスを最後のオプションに移動します。
Shift + 下矢印フォーカスを次のオプションに移動し、選択状態を切り替えます。
Shift + 上矢印フォーカスを前のオプションに移動し、選択状態を切り替えます。
Shift + スペース最後に選択されたオプションとフォーカスされたオプションの間のアイテムを選択します。
Ctrl + Shift + Homeフォーカスされたオプションと最初のオプションまでのすべてのオプションを選択します。
Ctrl + Shift + Endフォーカスされたオプションと最初のオプション以降のすべてのオプションを選択します。
Ctrl + Aすべてのオプションを選択します。

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

キー機能
Enterボタンのアクションを実行します。
スペースボタンのアクションを実行します。
PrimeTekによるVue 3上のPrimeVue 4.0.7PrimeTek