选择列表

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。

可用

已选


<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 提供描述源列表框和目标列表框的值。列表元素具有 listbox 角色和 aria-multiselectable 属性。每个列表项都有一个 option 角色，并带有 aria-selected 和 aria-disabled 属性。

控件按钮是 button 元素，带有 aria-label，默认情况下引用 locale API 的 aria.moveTop、aria.moveUp、aria.moveDown、aria.moveBottom、aria.moveTo、aria.moveAllTo、 aria.moveFrom 和 aria.moveAllFrom 属性，或者您可以使用 moveTopButtonProps、moveUpButtonProps、moveDownButtonProps、moveToButtonProps、moveAllToButtonProps、moveFromButtonProps、moveFromButtonProps 和 moveAllFromButtonProps 自定义按钮，例如覆盖默认的 aria-label 属性。


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

<OrderList aria-label="City" />

列表框键盘支持

按键	功能
tab	将焦点移动到第一个选定的选项，如果没有，则第一个选项获得焦点。
向上箭头	将焦点移动到上一个选项。
向下箭头	将焦点移动到下一个选项。
回车	切换焦点选项的选定状态。
空格	切换焦点选项的选定状态。
首页	将焦点移动到第一个选项。
结束	将焦点移动到最后一个选项。
shift + 向下箭头	将焦点移动到下一个选项并切换选择状态。
shift + 向上箭头	将焦点移动到上一个选项并切换选择状态。
shift + 空格	选择最近选择的选项和焦点选项之间的项目。
control + shift + home	选择焦点选项和所有到第一个选项的选项。
control + shift + end	选择焦点选项和所有到最后一个选项的选项。
control + a	选择所有选项。

按钮键盘支持

按键	功能
回车	执行按钮操作。
空格	执行按钮操作。