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

  • IgxNotificationsDirective
    • IgxToastComponent

実装

  • 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): 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

メソッド

  • 対応する軸に沿ってコンテンツを指定された量だけオフセットします。オフセット モードは、OffsetMode.Add および OffsetMode.Set を使用してオフセット値を追加するか (デフォルト)、設定するかを決定します。

    パラメーター

    • deltaX: number
    • deltaY: number
    • offsetMode: OffsetMode

    返却 void