クラス IgxBadgeComponent

アバターやメニューなどをデコレートするために使用される視覚的な通知を提供します。

igxmodule

IgxBadgeModule

igxtheme

igx-badge-theme

igxkeywords

badge, icon, notification

igxgroup

Data Entry & Display

備考:

Ignite UI Badge は、視覚的な通知が必要な場合にアプリケーションでアバター、ナビゲーション メニュー、またはその他のコンポーネントをデコレートするために使用されます。情報、成功、警告、またはエラーを表示するために定義済みのスタイルを持つアイコンとしてデザインされます。

例:

```html

階層

  • IgxBadgeComponent

Index

コンストラクタ

プロパティ

cssClass: string = 'igx-badge'

バッジで使用する CSS クラスを設定または取得します。

例:
@ViewChild("MyBadge", { read: IgxBadgeComponent })
public badge: IgxBadgeComponent;
badge.cssClass = 'my-badge-class';
icon: string

マテリアル アイコン セットからバッジのアイコンを設定または取得します。

備考:

value プロパティより優先されます。 value および icon が設定されない場合、バッジのコンテンツは空になります。 無効な値を設定すると、コンテンツは表示されません。

例:
<igx-badge icon="check"></igx-badge>
id: string = ...

バッジの id を設定または取得します。

備考:

設定しない場合、id"igx-badge-0" 値を持ちます。

例:
<igx-badge id="igx-badge-2"></igx-badge>
label: string = 'badge'

aria-label 属性の値を設定または取得します。

例:
@ViewChild("MyBadge", { read: IgxBadgeComponent })
public badge: IgxBadgeComponent;
badge.label = 'badge';
role: string = 'status'

role 属性の値を設定または取得します。

例:
@ViewChild("MyBadge", { read: IgxBadgeComponent })
public badge: IgxBadgeComponent;
badge.role = 'status';
type: string = IgxBadgeType.PRIMARY

バッジのタイプを設定または取得します。

備考:

有効な値は primaryinfosuccesswarning および error です。 無効な値を設定すると、バッジは表示されません。

例:
<igx-badge type="success"></igx-badge>
value: string | number = ''

バッジで表示する値を設定または取得します。

備考:

icon プロパティが設定される場合、icon が表示されます。 value および icon が設定されない場合、バッジのコンテンツは空になります。

例:
<igx-badge value="11"></igx-badge>

アクセサー

  • get errorClass(): boolean
  • get infoClass(): boolean
  • get successClass(): boolean
  • get warningClass(): boolean