クラス IgxBadgeComponent

Ignite UI for Angular Badge - ヘルプ

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

例:

<igx-avatar icon="person" roundShape="true" size="small">
  <igx-badge icon="check" type="success" class="badge-style">
  </igx-badge>
</igx-avatar>

badge-style クラスはバッジを配置するために使用されます。

.badge-style {
  position: absolute;
  bottom: -6px;
  right:-50px;
}

cssClass: string = "igx-badge"

igx-badge クラスを無効にできます。デフォルトでクラスが適用されます。

@ViewChild("MyBadge", { read: IgxBadgeComponent })
public badge: IgxBadgeComponent;
//...
badge.cssClass = false;

icon: string

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

<igx-badge icon="check" type="success" class="badge-style" value="11"></igx-badge>

id: string = `igx-badge-${NEXT_ID++}`

id 属性の値を設定する @Input プロパティ。

<igx-badge id="igx-badge-2" icon="check" type="success" class="badge-style"></igx-badge>

label: string = "badge"

aria-label 属性に値を設定します。

@ViewChild("MyBadge", { read: IgxBadgeComponent })
public badge: IgxBadgeComponent;
//...
badge.label = "icon-badge";

role: string = "status"

role 属性に値を設定します。

@ViewChild("MyBadge", { read: IgxBadgeComponent })
public badge: IgxBadgeComponent;
//...
badge.label = "badge-status";

type: string | Type = "default"

バッジのタイプを制御する @Input プロパティ。有効な値は default、info、success、warning、または error です。無効な値を設定すると、バッジは表示されません。

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

value: string = ""

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

<igx-badge value="11" type="success" class="badge-style"></igx-badge>