クラス IgxToastComponent

Ignite UI for Angular Toast - ヘルプ

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

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

階層

  • IgxNotificationsDirective
    • IgxToastComponent

実装

  • OnInit

Index

コンストラクタ

プロパティ

appended: EventEmitter<ToggleViewEventArgs> = ...

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

onAppended() {
alert("Content appended!");
}
<div
igxToggle
(onAppended)='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
(onClosed)='onToggleClosed($event)'>
</div>
closing: EventEmitter<ToggleViewCancelableEventArgs> = ...

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

onToggleClosing(event) {
alert("Toggle closing!");
}
<div
igxToggle
(closing)='onToggleClosing($event)'>
</div>
d$: Subject<boolean> = ...
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
(onOpened)='onToggleOpened($event)'>
</div>
opening: EventEmitter<ToggleViewCancelableEventArgs> = ...

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

onToggleOpening(event) {
alert("Toggle opening!");
}
<div
igxToggle
(onOpening)='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 element(): any
  • get isVisible(): boolean
  • set isVisible(value: boolean): void
  • get overlayId(): string
  • トーストで使用される位置とアニメーションの設定を取得します。

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

    返却 PositionSettings

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

    <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

メソッド

  • close(): void
  • reposition(): void
  • setOffset(deltaX: number, deltaY: number): void
  • toggle(): void