React Badge (バッジ) の概要
Ignite UI for React Badge は、視覚的な通知が必要な場合に、アバター、ナビゲーション メニュー、またはアプリケーション内の他のコンポーネントと組み合わせて使用されるコンポーネントです。バッジは通常、情報、成功、警告、またはエラーを伝達するために事前定義されたスタイルでデザインされています。
React Badge の例
使用方法
まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:
npm install igniteui-react
次に、以下のように、IgrBadge と必要な CSS をインポートする必要があります:
import { IgrBadge } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
<IgrBadge />
バッジの周囲に微妙な境界線を表示するには、バッジの outlined 属性を設定できます。
<IgrBadge outlined={true} ></IgrBadge>
例
バリエーション
Ignite UI for React バッジは、いくつかの事前定義されたスタイルのバリエーションをサポートします。サポートされている値 primary (デフォルト)、info、success、warning、または danger のいずれかを variant 属性に割り当てることにより、バリエーションを変更できます。
<IgrBadge variant="success" ></IgrBadge>
形状
バッジ コンポーネントは、rounded (デフォルト) 形状と square をサポートします。これらの値は、shape 属性に割り当てることができます。
<IgrBadge shape="square" ></IgrBadge>
スタイル設定
IgrBadge コンポーネントは、すべてのスタイル プロパティを変更するために使用できる base CSS パーツを公開します。
igc-badge::part(base) {
background: var(--ig-primary-500);
color: var(--ig-primary-500-contrast);
border-radius: 2px;
}