Angular Toast (トースト) コンポーネントの概要

Angular Toast の例

Ignite UI for Angular Toast を使用した作業の開始

Ignite UI for Angular Toast コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxToastModule をインポートします。

// app.module.ts

...
import { IgxToastModule } from 'igniteui-angular/toast';
// import { IgxToastModule } from '@infragistics/igniteui-angular'; for licensed package

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

あるいは、16.0.0 以降、IgxToastComponent をスタンドアロンの依存関係としてインポートできます。

// home.component.ts

import { IgxToastComponent } from 'igniteui-angular/toast';
import { IgxButtonDirective } from 'igniteui-angular/directives';
// import { IgxToastComponent, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <button igxButton="contained" (click)="toast.open()">Show notification</button>
    <igx-toast #toast>Notification displayed</igx-toast>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxToastComponent, IgxButtonDirective]
    /* or imports: [IgxTimePickerComponent, IgxButtonDirective] */
})
export class HomeComponent {
    public time: Date;
}

Ignite UI for Angular Toast モジュールまたはコンポーネントをインポートしたので、igx-toast コンポーネントの使用を開始できます。

Angular Toast の使用

Toast の表示

Toast コンポーネントを表示するには、ボタン クリックで open() メソッドを呼び出します。Toast コンテンツを要素内に渡すことができます。

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

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

Toast コンテンツを設定する別の方法は、メッセージをパラメーターとして open() メソッドに直接渡すことです。

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

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

open() メソッドを AppComponent ファイルで使用して、メッセージの値を管理することもできます。

// app.component.ts
@ViewChild('toast', { read: IgxToastComponent }) public toast: IgxToastComponent;

public message: any;

public ngOnInit() {
    this.message = 'Display message';
}

public showMessage() {
    this.toast.open(this.message);
}

例

非表示/自動的に隠す

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

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

<button igxButton="contained" (click)="toast.open()">Show Toast</button>
<button igxButton="contained" (click)="toast.close()">Hide Toast</button>
<igx-toast #toast [autoHide]="false">Notification displayed</igx-toast>

サンプルが正しく構成されると、[SHOW] ボタンをクリックしたときに Toast が表示されます。自動的に隠す機能が無効で、[HIDE] ボタンのクリックで Toast が非表示になります。 他の 2 つのコンポーネントでは、open() メソッドを介してさまざまなメッセージを渡し、コンテンツ プロジェクションを使用する方法を実際に見ることができます。

表示期間

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

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

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

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

配置

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

<!--sample.component.html-->
<div>
    <button igxButton="contained" (click)="open(toast)">Show notification on top</button>
    <igx-toast #toast>Notification displayed</igx-toast>
</div>

// sample.component.ts
import { VerticalAlignment } from 'igniteui-angular/core';
// import { VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package
...
public open(toast) {
    toast.positionSettings.verticalDirection = VerticalAlignment.Top;
    toast.open();
}
...

スタイル設定

Toast テーマのプロパティ マップ

プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。

Toast のスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

最もシンプルな方法として、toast-theme を拡張する新しいテーマを作成し、$background、$text-color、$border-radius パラメーターを指定します。

$custom-toast-theme: toast-theme(
  $text-color: #ffcd0f,
  $background: #292826,
  $border-radius: 12px
);

最後に Toast のカスタム テーマを設定します。

:host {
  @include tokens($custom-toast-theme);
}

デモ

Tailwind によるスタイル設定

カスタム Tailwind ユーティリティ クラスを使用して toast をスタイル設定できます。まず Tailwind を設定してください。

グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

ユーティリティ ファイルには、light テーマと dark テーマの両方のバリエーションが含まれています。

• light-* クラスはライト テーマ用です。
• dark-* クラスはダーク テーマ用です。
• プレフィックスの後にコンポーネント名を追加します (例: light-toast、dark-toast)。

これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、任意のプロパティを使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。

プロパティの完全なリストは、IgxToast テーマ で確認できます。構文は次のとおりです:

<igx-toast
  class="!light-toast ![--background:#90B69F]">
  ...
</igx-toast>

最終的に、toast は次のようになります:

API リファレンス

• Toast
• IgxToastComponent スタイル

その他のリソース

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

• Ignite UI for Angular フォーラム (英語)

• Ignite UI for Angular GitHub (英語)

• Ignite UI for Angular Forums

• Ignite UI for Angular GitHub