| title | {Platform} Badge | インフラジスティックス | ||
|---|---|---|---|
| description | インフラジスティックスの {Platform} Badge コンポーネントを使用すると、事前定義されたスタイルでコンテンツを表示して、アプリケーション内の任意の場所で他のコンポーネントを装飾できます。 | ||
| keywords | {Platform}, UI controls, web widgets, UI widgets, Web Components, {Platform} Badge Components, Infragistics, UI コントロール, web ウィジェット, UI ウィジェット, ウェブ コンポーネント, {Platform} バッジ コンポーネント, インフラジスティックス | ||
| license | MIT | ||
| mentionedTypes |
|
||
| _language | ja | ||
| llms |
|
import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
{ProductName} Badge は、視覚的な通知が必要な場合に、アバター、ナビゲーション メニュー、またはアプリケーション内の他のコンポーネントと組み合わせて使用されるコンポーネントです。バッジは通常、情報、成功、警告、またはエラーを伝達するために事前定義されたスタイルでデザインされています。
まず、次のコマンドを実行して {ProductName} をインストールする必要があります。
npm install {PackageWebComponents}次に、以下のように、 とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:
import { defineComponents, IgcBadgeComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcBadgeComponent);{ProductName} の完全な概要については、作業の開始トピックを参照してください。
まず、次のコマンドを実行して、対応する {ProductName} npm パッケージをインストールする必要があります:
npm install igniteui-react次に、以下のように、 と必要な CSS をインポートする必要があります:
import { IgrBadge } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';を使用する前に、次のように登録する必要があります。
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbBadgeModule));また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />の使用を開始する最も簡単な方法は次のとおりです:
<igc-badge></igc-badge><IgrBadge /><IgbBadge />{ProductName} バッジは、いくつかの事前定義されたスタイルのバリエーションをサポートします。サポートされている値 primary (デフォルト)、info、success、warning、または danger のいずれかを 属性に割り当てることにより、バリエーションを変更できます。
<IgrBadge variant="success" ></IgrBadge><igc-badge variant="success"></igc-badge><IgbBadge Variant="@StyleVariant.Success" />バッジにカスタム背景色が --background-color CSS 変数で設定されていても、バリアントの色が常に優先され、バッジに適用されます。
バッジ コンポーネントは、rounded (デフォルト) および square 形状をサポートします。これらの値は、 属性に割り当てることができます。
<IgrBadge shape="square" ></IgrBadge><igc-badge shape="square"></igc-badge><IgbBadge Shape="@BadgeShape.Square" />バッジの形状が square の場合、--border-radius CSS 変数を使用してカスタムのボーダー半径を設定することでさらにカスタマイズできます。
バッジには、 属性を設定すると、周囲に控えめなボーダーを表示することもできます。
<IgrBadge outlined={true} ></IgrBadge><igc-badge outlined></igc-badge><IgbBadge Outlined="true" />アウトライン バッジのボーダーの色は、--border-color CSS 変数を使用してカスタマイズすることもできます。
{ProductName} Badge コンポーネントは、 属性を設定することで、通知用の最小限のドット インジケーターとして表示することもできます。ドット バッジはコンテンツをサポートしませんが、アウトライン表示が可能で、利用可能なすべてのドット タイプ (例: primary、success、info など) を使用できます。
<IgrBadge dot={true} ></IgrBadge><igc-badge dot></igc-badge><IgbBadge Dot="true" /> コンポーネントは、すべてのスタイル プロパティを変更するために使用できる base CSS パーツを公開します。
igc-badge::part(base) {
--background-color: var(--ig-error-A100);
--border-radius: 2px;
}