バッジ

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

インポート#


import { Badge } from 'primereact/badge';
         

基本#

表示するテキストは、valueプロパティで定義されます。

2

<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を追加してカスタムキーハンドラを実装できます。

キーボードサポート

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

                PrimeReact 10.8.3 by PrimeTek