Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

クラス IgxBannerComponent

Ignite UI for Angular Banner - ヘルプ

Ignite UI Banner は、テンプレート化が可能な簡単に使用できるバナーです。 使用方法:

<igx-banner #banner>
  プライバシーの設定が変更されました。
 <igx-banner-actions>
     <button igxButton="raised">更に表示</button>
     <button igxButton="raised">承諾して続行</button>
 </igx-banner-actions>
</igx-banner>

階層

  • IgxBannerComponent

実装

コンストラクタ

プロパティ

アクセサー

メソッド

コンストラクタ

constructor

プロパティ

elementRef

elementRef: ElementRef

onClosed

onClosed: EventEmitter<BannerEventArgs> = new EventEmitter<BannerEventArgs>()

バナー非表示後に発生します。

public handleClosed(event) {
 ...
}
<igx-banner (onClosed)="handleClosed($event)"></igx-banner>

onClosing

onClosing: EventEmitter<BannerCancelEventArgs> = new EventEmitter<BannerCancelEventArgs>()

バナー非表示前に発生します。

public handleClosing(event) {
 ...
}
<igx-banner (onClosing)="handleClosing($event)"></igx-banner>

onOpened

onOpened: EventEmitter<BannerEventArgs> = new EventEmitter<BannerEventArgs>()

バナー表示後に発生します。

public handleOpened(event) {
 ...
}
<igx-banner (onOpened)="handleOpened($event)"></igx-banner>

onOpening

onOpening: EventEmitter<BannerCancelEventArgs> = new EventEmitter<BannerCancelEventArgs>()

バナー表示前に発生します。

public handleOpening(event) {
 ...
}
<igx-banner (onOpening)="handleOpening($event)"></igx-banner>

アクセサー

animationSettings

  • バナーの open/close メソッドで使用されるアニメーション設定を取得します。

    let currentAnimations: AnimationSettings = banner.animationSettings

    返却 AnimationSettings

  • バナーの open/close メソッドで使用されるアニメーション設定を設定します。

    import { slideInLeft, slideOutRight } from 'igniteui-angular';
...
banner.animationSettings: AnimationSettings = { openAnimation: slideInLeft, closeAnimation: slideOutRight };

    パラメーター

    返却 void

collapsed

  • get collapsed(): boolean

  • バナーが閉じられるかどうかを取得します。

    const isCollapsed: boolean = banner.collapsed;

    返却 boolean

element

  • get element(): any

  • バナー コンポーネントのネイティブ要素を返します。

     const myBannerElement: HTMLElement = banner.element;

    返却 any

メソッド

close

  • close(event?: Event): void

  • バナーを閉じます。

     myBanner.close();
    <igx-banner #banner>
...
</igx-banner>
<button (click)="banner.close()">バナーを閉じる</button>

    パラメーター

    • オプション event: Event

    返却 void

open

  • open(event?: Event): void

  • バナーを開きます。

     myBanner.open();
    <igx-banner #banner>
...
</igx-banner>
<button (click)="banner.open()">バナーを開く</button>

    パラメーター

    • オプション event: Event

    返却 void

toggle

  • toggle(event?: Event): void

  • バナーを切り替えます。

     myBanner.toggle();
    <igx-banner #banner>
...
</igx-banner>
<button (click)="banner.toggle()">バナーを切り替える</button>

    パラメーター

    • オプション event: Event

    返却 void