Ignite UI for Angular

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

Class IgxToastComponent

Ignite UI for Angular Toast - ヘルプ

Ignite UI Toast は、ユーザーが閉じられない非対話型の情報や報告メッセージを表示できます。 Toast はページの下側、中央、または上側に表示できます。

例:

<button type="button" igxButton (click)="toast.open()">Show notification</button>
<igx-toast #toast displayTime="1000">
     Notification displayed
</igx-toast>

階層

Hierarchy (View Summary)

実装

  • OnInit

コンストラクター

プロパティ

アクセサー

メソッド

コンストラクター

プロパティ

appended: EventEmitter<ToggleViewEventArgs> = ...

トグル要素がオーバーレイ コンテナーに追加された後にイベントを発生します。

onAppended() {
 alert("Content appended!");
}

<div
  igxToggle
  (appended)='onToggleAppended()'>
</div>
ariaLive: string = 'polite'

aria-live 属性を設定または取得します。 設定しない場合、aria-live は "polite" です。

autoHide: boolean = true

要素が displayTime の終了後に非表示になるかどうかを取得または設定します。 デフォルト値は true です。

closed: EventEmitter<ToggleViewEventArgs> = ...

トグル コンテナーが閉じた後にイベントを発生します。

onToggleClosed(event) {
 alert("Toggle closed!");
}

<div
  igxToggle
  (closed)='onToggleClosed($event)'>
</div>
closing: EventEmitter<ToggleViewCancelableEventArgs> = ...

トグル コンテナーが閉じた前にイベントを発生します。

onToggleClosing(event) {
 alert("Toggle closing!");
}

<div
 igxToggle
 (closing)='onToggleClosing($event)'>
</div>
displayTime: number = 4000

表示された後、要素が表示される期間 (ミリ行) を取得または設定します。 デフォルト値は 4000 です。

id: string = ...

トーストの id を取得または設定します。 設定しない場合、id は "igx-toast-0" です。

<igx-toast id = "my-first-toast"></igx-toast>

let toastId = this.toast.id;
opened: EventEmitter<ToggleViewEventArgs> = ...

トグル コンテナーが開かれた後、イベントを発生します。

onToggleOpened(event) {
   alert("Toggle opened!");
}

<div
  igxToggle
  (opened)='onToggleOpened($event)'>
</div>
opening: EventEmitter<ToggleViewCancelableEventArgs> = ...

トグル コンテナーが開いた前にイベントを発生します。

onToggleOpening(event) {
 alert("Toggle opening!");
}

<div
  igxToggle
  (opening)='onToggleOpening($event)'>
</div>
outlet: IgxOverlayOutletDirective | ElementRef<HTMLElement>

要素に使用されるコンテナーを取得または設定します。

outlet は、IgxOverlayOutletDirective または ElementRef のインスタンスです。

role: string = 'alert'

role 属性を取得または設定します。 設定しない場合、role は "alert" です。

<igx-toast [role] = "'notify'"></igx-toast>

let toastRole = this.toast.role;

IgxToastComponent

アクセサー

  • get positionSettings(): PositionSettings

    トーストで使用される位置とアニメーションの設定を取得します。

    @ViewChild('toast', { static: true }) public toast: IgxToastComponent;
    let currentPosition: PositionSettings = this.toast.positionSettings

    返却 PositionSettings

  • set positionSettings(settings: PositionSettings): void

    トーストで使用される位置とアニメーションの設定を設定します。

    <igx-toast [positionSettings]="newPositionSettings"></igx-toast>

    import { slideInTop, slideOutBottom } from 'igniteui-angular';
    ...
    @ViewChild('toast', { static: true }) public toast: IgxToastComponent;
     public newPositionSettings: PositionSettings = {
         openAnimation: useAnimation(slideInTop, { params: { duration: '1000ms', fromPosition: 'translateY(100%)'}}),
         closeAnimation: useAnimation(slideOutBottom, { params: { duration: '1000ms', fromPosition: 'translateY(0)'}}),
         horizontalDirection: HorizontalAlignment.Left,
         verticalDirection: VerticalAlignment.Middle,
         horizontalStartPoint: HorizontalAlignment.Left,
         verticalStartPoint: VerticalAlignment.Middle
     };
    this.toast.positionSettings = this.newPositionSettings;

    パラメーター

    返却 void

メソッド