徽章

徽章是另一個元素的小狀態指示器。

導入 #


// import as component
import Badge from 'primevue/badge';
import OverlayBadge from 'primevue/overlaybadge';

基本 #

要顯示的文字是使用 value 屬性定義的。


<Badge value="2"></Badge>

嚴重性 #

嚴重性定義徽章的變體。

2684935


<Badge value="2"></Badge>
<Badge value="6" severity="secondary"></Badge>
<Badge value="8" severity="success"></Badge>
<Badge value="4" severity="info"></Badge>
<Badge value="9" severity="warn"></Badge>
<Badge value="3" severity="danger"></Badge>
<Badge value="5" severity="contrast"></Badge>

大小 #

使用 size 屬性來自訂徽章的尺寸。

8642


<Badge value="8" size="xlarge" severity="success"></Badge>
<Badge value="6" size="large" severity="warn"></Badge>
<Badge value="4" severity="info"></Badge>
<Badge value="2" size="small"></Badge>

覆蓋 #

徽章可以透過使用 OverlayBadge 元件封裝內容來新增到任何元素。


<OverlayBadge value="2">
    <i class="pi pi-bell" style="font-size: 2rem" />
</OverlayBadge>
<OverlayBadge value="4" severity="danger">
    <i class="pi pi-calendar" style="font-size: 2rem" />
</OverlayBadge>
<OverlayBadge severity="danger">
    <i class="pi pi-envelope" style="font-size: 2rem" />
</OverlayBadge>

Button #

按鈕內建支援徽章，以內嵌方式顯示徽章。


<Button type="button" label="Notifications" icon="pi pi-bell" badge="2" />
<Button type="button" label="Inbox" icon="pi pi-inbox" badge="2" badgeSeverity="contrast" outlined />

輔助功能 #

螢幕閱讀器

徽章預設不包含任何角色和屬性，任何屬性都會傳遞到根元素，因此如果需要可以新增 aria 角色和屬性。如果徽章是動態的，也可以使用 aria-live。如果徽章需要可定位，則可以新增 tabindex 來實作自訂的按鍵處理常式。

鍵盤支援

元件不包含任何互動元素。

徽章