Chip

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

インポート#


import { Chip } from 'primereact/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 />

テンプレート#

templateプロパティを使用すると、チップ内にカスタムコンテンツを表示できます。

PPRIME


<Chip template={content} />

アクセシビリティ#

スクリーンリーダー

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

キーボードサポート

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