React Badge (バッジ) の概要

Ignite UI for React Badge は、視覚的な通知が必要な場合に、アバター、ナビゲーションメニュー、またはアプリケーション内の他のコンポーネントと組み合わせて使用されるコンポーネントです。バッジは通常、情報、成功、警告、またはエラーを伝達するために事前定義されたスタイルでデザインされています。

React Badge の例

使用方法

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react

次に、以下のように、IgrBadge とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { IgrBadgeModule, IgrBadge } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrBadgeModule.register();

<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>

スタイル設定

バッジコンポーネントは、すべてのスタイルプロパティを変更するために使用できる base パーツを公開します。

igc-badge::part(base) {
  color: olive;
  background: beige;
  border-radius: 2px;
}

API リファレンス

IgrBadge