芯片

芯片使用图标、标签和图像表示实体。

导入#


import { Chip } from 'primereact/chip';

基本#

使用 label 属性创建一个带有文本的基本芯片。此外，当添加 removable 时，会显示一个删除图标以删除芯片。

动作

喜剧

神秘

惊悚


<Chip label="Action" />
<Chip label="Comedy" />
<Chip label="Mystery" />
<Chip label="Thriller" removable />

图标#

可以使用 icon 属性在标签旁边显示一个字体图标。

苹果

Facebook

Google

微软


<Chip label="Apple" icon="pi pi-apple" />
<Chip label="Facebook" icon="pi pi-facebook" />
<Chip label="Google" icon="pi pi-google" />
<Chip label="Microsoft" icon="pi pi-microsoft" removable />

图像#

image 属性用于显示像头像一样的图像。

艾米·埃尔斯纳

阿西娅·贾瓦扬特

奥尼亚玛·林巴

徐雪峰


<Chip label="Amy Elsner" image="/images/avatar/amyelsner.png" />
<Chip label="Asiya Javayant" image="/images/avatar/asiyajavayant.png" />
<Chip label="Onyama Limba" image="/images/avatar/onyamalimba.png" />
<Chip label="Xuxue Feng" image="/images/avatar/xuxuefeng.png" removable />

模板#

template 属性允许在芯片内显示自定义内容。

PPRIME


<Chip template={content} />

可访问性#

屏幕阅读器

芯片使用 label 属性作为默认的 aria-label，由于任何属性都传递到根元素，aria-labelledby 或 aria-label 可用于覆盖默认行为。可移除芯片具有一个 tabIndex，可以使用 tab 键聚焦。

键盘支持

按键	功能
退格键	隐藏可移除项。
回车键	隐藏可移除项。