Ignite UI for Angular

すべて
  • パブリック
  • パブリック/保護
  • すべて

クラス IgxBadgeComponent

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

@igxmodule

IgxBadgeModule

@igxtheme

igx-badge-theme

@igxkeywords

badge, icon, notification

@igxgroup

Data Entry & Display

@備考:

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

@例:

```html

階層

  • IgxBadgeComponent

Index

コンストラクタ

プロパティ

アクセサー

コンストラクタ

constructor

プロパティ

cssClass

cssClass: string = 'igx-badge'

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

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

icon

icon: string

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

@備考:

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

@例:
<igx-badge icon="check"></igx-badge>

id

id: string = ...

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

@備考:

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

@例:
<igx-badge id="igx-badge-2"></igx-badge>

label

label: string = 'badge'

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

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

role

role: string = 'status'

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

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

type

type: string = ...

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

@備考:

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

@例:
<igx-badge type="success"></igx-badge>

value

value: string | number = ''

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

@備考:

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

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

アクセサー

errorClass

  • get errorClass(): boolean

infoClass

  • get infoClass(): boolean

successClass

  • get successClass(): boolean

warningClass

  • get warningClass(): boolean