徽章

徽章是另一个元素的小状态指示器。

导入 #


// 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 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来实现自定义键处理程序。

键盘支持

组件不包含任何交互元素。

徽章