Ignite UI for Angular

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

クラス IgxIconComponent

アイコンは、マークアップにマテリアル アイコンを含める方法を提供します。

@igxmodule

IgxIconModule

@igxtheme

igx-icon-theme

@igxkeywords

icon, picture

@igxgroup

Display

@備考:

Ignite UI Icon を使用すると、開発者はマテリアル デザイン アイコンをマークアップに直接簡単に含めることができます。 アイコンはさまざまなアイコン ファミリをサポートしており、active プロパティを使用してアクティブまたは無効としてマークできます。 これにより、アイコンの外観が変更されます。

@例:
<igx-icon family="filter-icons" active="true">home</igx-icon>

階層

  • IgxIconComponent

実装

  • OnInit
  • OnDestroy

Index

コンストラクタ

プロパティ

アクセサー

コンストラクタ

constructor

プロパティ

active

active: boolean = true

active プロパティの無効化を許可する @Input プロパティ。デフォルトでクラスが適用されます。

@例:
<igx-icon [active]="false">settings</igx-icon>

ariaHidden

ariaHidden: boolean = true

aria-hidden 属性を無効にできます。デフォルトでクラスが適用されます。

@例:
@ViewChild("MyIcon") public icon: IgxIconComponent;
constructor(private cdRef:ChangeDetectorRef) {}
ngAfterViewInit() {
    this.icon.ariaHidden = false;
    this.cdRef.detectChanges();
}

color

color: string

アイコンの color の変更を許可する @Input プロパティ。

  • @deprecated
@例:
<igx-icon color="blue">settings</igx-icon>

el

el: ElementRef<any>

family

family: string

family の値を設定する @Input プロパティ。デフォルトは、"material" です。

@例:
<igx-icon family="material">settings</igx-icon>

name

name: string

アイコンの name の変更を許可する @Input プロパティ。

@例:
<igx-icon name="contains" family="filter-icons"></igx-icon>

アクセサー

getActive

  • get getActive(): boolean

getColor

  • get getColor(): string

getFamily

  • get getFamily(): string

getInactive

  • get getInactive(): boolean

getName

  • get getName(): string

getSvgKey

  • get getSvgKey(): string

  • SVG 画像のキーを返すアクセサー。 アンダースコアで区切られた family と name で構成されるキー。

    @例:
    @ViewChild("MyIcon")
public icon: IgxIconComponent;
ngAfterViewInit() {
   let svgKey = this.icon.getSvgKey;
}

    返却 string

template

  • get template(): TemplateRef<HTMLElement>

  • 明示的、暗黙、またはなしの合字を参照する TemplateRef を返すアクセサー。

    @例:
    @ViewChild("MyIcon")
public icon: IgxIconComponent;
ngAfterViewInit() {
   let iconTemplate = this.icon.template;
}

    返却 TemplateRef<HTMLElement>