Badge

バッジは、別の要素の小さなステータスインジケーターです。

インポート #


// 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を追加できます。

キーボードサポート

コンポーネントには、インタラクティブな要素は含まれていません。