Chip

Chipは、アイコン、ラベル、画像を使用してエンティティを表します。

インポート #


import Chip from 'primevue/chip';

基本 #

テキストを含む基本的なチップは、labelプロパティを使用して作成されます。さらに、removableが追加されると、チップを削除するための削除アイコンが表示されます。

アクション

コメディ

ミステリー

スリラー


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

アイコン #

ラベルの横にフォントアイコンを表示するには、iconプロパティを使用します。

Apple

Facebook

Google

Microsoft


<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プロパティは、アバターのような画像を表示するために使用されます。

Amy Elsner

Asiya Javayant

Onyama Limba

Xuxue Feng


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

アクセシビリティ #

スクリーンリーダー

Chipは、labelプロパティをデフォルトのaria-labelとして使用します。ルート要素に任意の属性が渡されるため、aria-labelledbyまたはaria-labelを使用してデフォルトの動作をオーバーライドできます。削除可能なチップにはtabindexがあり、タブキーでフォーカスできます。

キーボードサポート

キー	機能
バックスペース	削除可能なものを非表示にします。
エンター	削除可能なものを非表示にします。