排序列表

排序列表用於排序集合。

匯入 #


import OrderList from 'primevue/orderlist';

基本 #

排序列表需要一個陣列作為其值，並使用 v-model 指令綁定，且需要 option 範本作為其內容。

沒有可用的選項未選擇任何項目


<OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcListbox: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>

無障礙功能 #

螢幕閱讀器

可以使用 listProps 通過傳遞 aria-labelledby 或 aria-label 屬性來提供描述列表框的值。列表元素具有 listbox 角色，並具有 aria-multiselectable 屬性。每個列表項目都具有 option 角色，並具有 aria-selected 和 aria-disabled 作為其屬性。

控制按鈕是 button 元素，其 aria-label 預設是指 locale API 的 aria.moveTop、aria.moveUp、aria.moveDown 和 aria.moveBottom 屬性，或者您可以使用 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 + 空白鍵	選取最近選取的選項和焦點選項之間的所有項目。
control + shift + home	選取焦點選項以及所有向上到第一個選項的選項。
control + shift + end	選取焦點選項以及所有向下到第一個選項的選項。
control + a	選取所有選項。

按鈕鍵盤支援

按鍵	功能
enter	執行按鈕動作。
空白鍵	執行按鈕動作。