芯片

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

导入 #


import Chip from 'primevue/chip';

基本 #

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

动作

喜剧

神秘

惊悚


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

图标 #

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

苹果

Facebook

谷歌

微软


<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 />

模板 #

默认插槽允许在芯片内部显示自定义内容。

PPRIME


<Chip class="py-0 pl-0 pr-4">
    <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
    <span class="ml-2 font-medium">PRIME</span>
</Chip>

可访问性 #

屏幕阅读器

芯片使用 label 属性作为默认的 aria-label，因为任何属性都传递到根元素 aria-labelledby 或 aria-label 可以用来覆盖默认行为。可移除芯片有一个 tabindex 并且可以使用 Tab 键获得焦点。

键盘支持

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

芯片