Class IgxBadgeComponent

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

Igx Module

IgxBadgeModule

Igx Theme

igx-badge-theme

Igx Keywords

badge, icon, notification

Igx Group

データ入力 & 表示

備考

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

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

コンストラクター

プロパティ

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>
iconSet: string

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

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';
shape: "square" | "rounded" = 'rounded'

Sets a square shape to the badge, if shapesquare に設定されている場合、バッジに四角形を設定します。

<igx-badge shape="square"></igx-badge>
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>

アクセサー