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