芯片

芯片用于在输入字段中输入多个值。

导入#


import { Chips } from 'primereact/chips';

基本#

芯片作为受控输入使用，具有 value 和 onChange 属性，其中 value 应该是一个数组。


<Chips value={value} onChange={(e) => setValue(e.value)} />

分隔符#

当按下 enter 键时，会添加一个新的芯片，separator 属性允许定义一个额外的键。目前唯一有效的值是 ,，以便在按下逗号键时创建一个新项。


<Chips value={value} onChange={(e) => setValue(e.value)} separator="," />

模板#

芯片内容可以使用 itemTemplate 函数自定义，该函数接收单个芯片值作为参数。


<Chips value={value} onChange={(e) => setValue(e.value)} itemTemplate={customChip} />

按键过滤器#

芯片具有内置的按键过滤支持以阻止某些按键，有关更多信息，请参阅按键过滤器页面。


<Chips value={value} onChange={(e) => setValue(e.value)} keyfilter="int" />

浮动标签#

当聚焦时，浮动标签会出现在输入字段的顶部。有关更多信息，请访问浮动标签文档。

用户名


<FloatLabel>
    <Chips id="username" value={value} onChange={(e) => setValue(e.value)} />
    <label htmlFor="username">Username</label>
</FloatLabel>

填充#

将 variant 属性指定为 filled，以显示比默认 outlined 样式具有更高视觉强调的组件。


<Chips variant="filled" value={value} onChange={(e) => setValue(e.value)} />

无效#

无效状态使用 invalid 属性显示，以指示验证失败。在与表单验证库集成时可以使用此样式。


<Chips invalid value={value} onChange={(e) => setValue(e.value)} />

禁用#

当存在 disabled 时，该元素无法编辑和聚焦。


<Chips disabled placeholder="Disabled" />

可访问性#

屏幕阅读器

描述组件的值可以通过 label 标签与 inputId 属性组合提供，也可以使用 aria-labelledby、aria-label 属性。芯片列表使用具有 aria-orientation 的 listbox 角色设置为水平方向，而每个芯片都具有 option 角色，并将 aria-label 设置为芯片的标签。


<label htmlFor="chips1">Tags</label>
<Chips inputId="chips1" />

<span id="chips2">Tags</span>
<Chips aria-labelledby="chips2" />

<Chips aria-label="Tags" />

输入字段键盘支持

按键	功能
tab	将焦点移动到输入元素
enter	使用输入字段值添加新芯片。
退格键	如果输入字段为空，则删除上一个芯片。
左箭头	如果可用且输入字段为空，则将焦点移动到上一个芯片。

芯片键盘支持

按键	功能
左箭头	如果可用，则将焦点移动到上一个芯片。
右箭头	将焦点移动到下一个芯片，如果没有，则输入字段接收焦点。
退格键	删除芯片并将焦点添加到输入字段。