クラス IgxBadgeComponent

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

Igx Module

IgxBadgeModule

Igx Theme

igx-badge-theme

Igx Keywords

badge, icon, notification

Igx Group

データ入力と表示

Remarks

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

Example

<igx-avatar>
<igx-badge icon="check" type="success"></igx-badge>
</igx-avatar>

階層

Hierarchy

  • IgxBadgeComponent

コンストラクタ

プロパティ

アクセサー

コンストラクタ

プロパティ

cssClass: string = 'igx-badge'

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

Example

@ViewChild("MyBadge", { read: IgxBadgeComponent })
public badge: IgxBadgeComponent;

badge.cssClass = 'my-badge-class';
icon: string

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

Remarks

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

Example

<igx-badge icon="check"></igx-badge>
iconSet: string

アイコン セットの名前。アイコンが別のアイコン セットのものである場合に使用されます。

id: string = ...

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

Remarks

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

Example

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

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

Example

@ViewChild("MyBadge", { read: IgxBadgeComponent })
public badge: IgxBadgeComponent;

badge.label = 'badge';
role: string = 'status'

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

Example

@ViewChild("MyBadge", { read: IgxBadgeComponent })
public badge: IgxBadgeComponent;

badge.role = 'status';
shape: "square" | "rounded" = 'rounded'

shapesquare に設定されている場合、バッジに四角形を設定します。 デフォルトでは、バッジの形状は rounded です。

Example

<igx-badge shape="square"></igx-badge>
type: string = IgxBadgeType.PRIMARY

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

Remarks

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

Example

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

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

Remarks

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

Example

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

アクセサー