Toast

Ignite UI for Angular Toast コンポーネントは、ユーザーが閉じられない非対話型の情報および報告メッセージを表示できます。通知はページの上側、中央、または下側に表示できます。

Toast デモ

Note

Ignite UI for Angular コンポーネントをプロジェクトに追加する前に、すべての必要な依存関係を構成し、プロジェクトのセットアップが正しく完了したことを確認してください。「インストール」のトピックで手順を参照できます。

使用方法

Ignite UI for Angular Toast を初期化する前に、最初に IgxToastModuleapp.module.ts ファイルにインポートします:

// app.module.ts

...
import { IgxToastModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxToastModule],
    ...
})
export class AppModule {}

Toast の表示

Toast コンポーネントを表示するには、ボタン クリックで show() メソッドを呼び出します。message 入力を使用して通知を設定します。

<!--sample.component.html-->

<button igxButton="raised" (click)="toast.show()">Show notification</button>
<igx-toast #toast message="Notification displayed"></igx-toast>

サンプルが正しく構成された場合、ボタン クリック時に通知を表示する Toast が表示されます。

非表示/自動的に隠す

開いた後は、displayTime 入力によって指定した期間遅延後に非表示になります。デフォルト値は 4000 ミリ秒です。この動作はデフォルトで有効ですが、autoHidefalse に設定して変更できます。この場合、Toast は非表示になりません。Toast の hide() メソッドを使用して、コンポーネントを閉じることができます。

<!--sample.component.html-->

<button igxButton="raised" (click)="toast.show()">SHOW TOAST</button>
<button igxButton="raised" (click)="toast.hide()">HIDE TOAST</button>
<igx-toast #toast message="Notification displayed" [autoHide]="false"></igx-toast>

サンプルが正しく構成されると、[SHOW] ボタンをクリックしたときに Toast が表示されます。自動的に隠す機能が無効で、[HIDE] ボタンのクリックで Toast が非表示になります。

表示期間

displayTime でミリ秒間隔に設定し、Toast コンポーネントが表示される期間を構成します。

<!--sample.component.html-->

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

サンプルが正しく構成された場合、Toast が自動ですばやく非表示になります。

配置

position を使用すると、Toast の表示位置を構成します。デフォルトで、Toast はページの下に表示されます。以下のサンプルで、通知が上位置に表示されます。

<!--sample.component.html-->

<div>
    <button igxButton="raised" (click)="show(toast)">Show notification on top</button>
    <igx-toast #toast message="Notification displayed" [position]="toastPosition"></igx-toast>
</div>
// sample.component.ts

import { IgxToastPosition } from 'igniteui-angular';

...
public toastPosition: IgxToastPosition;
public show(toast) {
    this.toastPosition = IgxToastPosition.Top;
    toast.show();
}
...

API リファレンス

このトピックでは、IgxToastComponent を使用と構成方法を説明しました。API の詳細については以下のリンク先を参照してください。

スタイル:

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。