晶片

晶片使用圖示、標籤和圖片來表示實體。

導入 #


import Chip from 'primevue/chip';

基本 #

使用 label 屬性建立帶有文字的基本晶片。此外，當加入 removable 時，會顯示刪除圖示以移除晶片。

動作

喜劇

懸疑

驚悚


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

圖示 #

可以使用 icon 屬性顯示標籤旁邊的字體圖示。

蘋果

臉書

谷歌

微軟


<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 鍵聚焦。

鍵盤支援

按鍵	功能
退格鍵	隱藏可移除。
Enter	隱藏可移除。

晶片