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

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

    Angular Toast の例

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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

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

    ng add igniteui-angular
cmd

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

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

    // app.module.ts

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

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

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

    // home.component.ts

import { IgxToastComponent, IgxButtonDirective } from 'igniteui-angular';
// 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;
}
typescript

    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>
html

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

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

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

    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);
}
typescript

    例

    非表示/自動的に隠す

    開いた後は、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>
html

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    表示期間

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

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

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

    サンプルが正しく構成された場合、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>
html
    // sample.component.ts
import { VerticalAlignment } from 'igniteui-angular';
// import { VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package
...
public open(toast) {
    toast.positionSettings.verticalDirection = VerticalAlignment.Top;
    toast.open();
}
...
typescript

    EXAMPLE
    MODULES
    TS
    HTML
    Edit in:

    App Builder | CTA Banner

    スタイル設定

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

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

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

    最も簡単な方法は、toast-theme を拡張する新しいテーマを作成し、$background、$text-color と $border-radius パラメーターを受け取る方法です。

    $custom-toast-theme: toast-theme(
  $background: #dedede,
  $text-color: #151515,
  $border-radius: 12px
);
scss

    上記のようにカラーの値をハードコーディングする代わりに、palette および color 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレットのトピックをご覧ください。

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

    @include css-vars($custom-toast-theme);
scss

    デモ

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    API リファレンス

    その他のリソース

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