徽章

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

导入#


import { Badge } from 'primereact/badge';

基本#

要显示的文本使用 value 属性定义。


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

严重性#

严重性定义了徽章的颜色，除了默认主题颜色外，可能的取值有 success、info、warning 和 danger。

28412375


<Badge value="2"></Badge>
<Badge value="8" severity="success"></Badge>
<Badge value="4" severity="info"></Badge>
<Badge value="12" severity="warning"></Badge>
<Badge value="3" severity="danger"></Badge>
<Badge value="7" severity="secondary"></Badge>
<Badge value="5" severity="contrast"></Badge>

大小#

使用 size 属性自定义徽章的大小，当前 large 和 xlarge 可用作大小选项。

642


<Badge value="6" size="xlarge" severity="success"></Badge>
<Badge value="4" size="large" severity="warning"></Badge>
<Badge value="2"></Badge>

位置#

通过将 p-overlay-badge 样式类添加到元素并将徽章嵌入其中，可以将徽章定位在元素的右上角。

25+


<i className="pi pi-bell p-overlay-badge" style={{ fontSize: '2rem' }}>
    <Badge value="2"></Badge>
</i>
<i className="pi pi-calendar p-overlay-badge" style={{ fontSize: '2rem' }}>
    <Badge value="5+" severity="danger"></Badge>
</i>
<i className="pi pi-envelope p-overlay-badge" style={{ fontSize: '2rem' }}>
    <Badge severity="danger"></Badge>
</i>

按钮#

按钮内置支持徽章以显示内联徽章。


<Button type="button" label="Emails">
    <Badge value="8"></Badge>
</Button>
<Button type="button" label="Messages" icon="pi pi-users" severity="secondary">
    <Badge value="8" severity="danger"></Badge>
</Button>

可访问性#

屏幕阅读器

徽章默认不包含任何角色和属性，任何属性都会传递到根元素，因此可以根据需要添加 aria 角色和属性。如果徽章是动态的，也可以使用aria-live。如果徽章需要可聚焦，可以添加tabIndex来实现自定义按键处理程序。

键盘支持

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