Toast

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

Angular Toast の例

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

codesandbox で表示 StackBlitz で表示

使用方法

はじめに

Toast コンポーネントを初期化する前に、IgxToastModule を app.module.ts ファイルにインポートします。

// app.module.ts

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

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

Toast の表示

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

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

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

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

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

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

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

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

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

public message: any;

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

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

例

非表示/自動的に隠す

開いた後は、displayTime に指定した時間期間後に非表示になります。デフォルト値は 4000 ミリ秒です。この動作はデフォルトで有効ですが、autoHide を false に設定して変更できます。このように、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 が非表示になります。 他の 2 つのコンポーネントでは、show() メソッドを介してさまざまなメッセージを渡し、コンテンツ プロジェクションを使用する方法を実際に見ることができます。

codesandbox で表示 Stackblitz で表示

表示期間

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 の表示位置を構成します。デフォルトで、ページの下に表示されます。以下のサンプルで、通知が上位置に表示されます。

<!--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 = "top";
    toast.show();
}
...

codesandbox で表示 StackBlitz で表示

スタイル設定

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

@import '~igniteui-angular/lib/core/styles/themes/index';

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

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

CSS 変数の使用

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

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

ミックスインの使用

Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。 カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

:host {
    ::ng-deep {
        // Pass the custom toast theme to the `igx-toast` mixin
        @include igx-toast($custom-toast-theme);
    }
}

カラー パレットの使用

上記のように色の値をハードコーディングする代わりに、igx-palette および igx-color 関数を使用して色に関してより高い柔軟性を実現することができます。

igx-palette は渡された一次色と二次色に基づいてカラーパレットを生成します。

$white-color: #dedede;
$black-color: #151515;

$light-toast-palette: igx-palette($primary: $white-color, $secondary: $black-color);

また igx-color を使用してパレットから簡単に色を取り出すことができます。

$custom-toast-theme: igx-toast-theme(
    $background: igx-color($light-toast-palette, "primary", 400),
    $text-color: igx-color($light-toast-palette, "secondary", 400),
    $border-radius: 12px
);

Note

igx-color および igx-palette は、色を生成および取得するための重要な機能です。使い方の詳細についてはパレットのトピックを参照してください。

スキーマの使用

スキーマ の利点を活用でき、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用する方法です。

すべてのコンポーネントに提供されている 2 つの定義済みスキーマ (ここでは light-toast) の 1 つを拡張します。

//  Extending the toast schema
$light-toast-schema: extend($_light-toast,
    (
        background: (
            igx-color: ("primary", 400)
        ),
        text-color: (
            igx-color: ("secondary", 400)
        ),
        border-radius: 12px
    )
);

カスタム スキーマを適用するには、グローバル (light または dark) の 1 つを拡張する必要があります。これは基本的にカスタム スキーマでコンポーネントを指し示し、その後それぞれのコンポーネント テーマに追加するものです。

// Extending the global light-schema
$custom-light-schema: extend($light-schema,(
    igx-toast: $light-toast-schema
));

// Defining toast with the global light schema
$custom-toast-theme: igx-toast-theme(
  $palette: $light-toast-palette,
  $schema: $custom-light-schema
);

上記と同じ方法でテーマを含める必要があることに注意してください。

codesandbox で表示 StackBlitz で表示

API リファレンス

• IgxToastComponent
• IgxToastComponent スタイル

その他のリソース

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

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