バッジで使用する CSS クラスを設定または取得します。
@ViewChild("MyBadge", { read: IgxBadgeComponent })
public badge: IgxBadgeComponent;
badge.cssClass = 'my-badge-class';
マテリアル アイコン セットからバッジのアイコンを設定または取得します。
value プロパティより優先されます。
value および icon が設定されない場合、バッジのコンテンツは空になります。
無効な値を設定すると、コンテンツは表示されません。
<igx-badge icon="check"></igx-badge>
バッジの id を設定または取得します。
設定しない場合、id は "igx-badge-0" 値を持ちます。
<igx-badge id="igx-badge-2"></igx-badge>
aria-label 属性の値を設定または取得します。
@ViewChild("MyBadge", { read: IgxBadgeComponent })
public badge: IgxBadgeComponent;
badge.label = 'badge';
role 属性の値を設定または取得します。
@ViewChild("MyBadge", { read: IgxBadgeComponent })
public badge: IgxBadgeComponent;
badge.role = 'status';
shape が square に設定されている場合、バッジに四角形を設定します。
デフォルトでは、バッジの形状は rounded です。
<igx-badge shape="square"></igx-badge>
バッジのタイプを設定または取得します。
有効な値は primary、info、success、warning、errorです。
無効な値を設定すると、バッジは表示されません。
<igx-badge type="success"></igx-badge>
バッジで表示する値を設定または取得します。
icon プロパティが設定される場合、icon が表示されます。
value および icon が設定されない場合、バッジのコンテンツは空になります。
<igx-badge value="11"></igx-badge>
アバターやメニューなどをデコレートするために使用される視覚的な通知を提供します。
Igx Module
IgxBadgeModule
Igx Theme
igx-badge-theme
Igx Keywords
badge, icon, notification
Igx Group
データ入力と表示
Remarks
Ignite UI Badge は、視覚的な通知が必要な場合にアプリケーションでアバター、 ナビゲーション メニュー、またはその他のコンポーネントをデコレートするために使用されます。 情報、成功、警告、またはエラーを表示するために定義済みのスタイルを持つアイコンとしてデザインされます。
Example