Angular Toast (トースト) コンポーネントの概要
Ignite UI for 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';
// import { IgxToastModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxToastModule],
...
})
export class AppModule {}
あるいは、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;
}
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);
}
Warning
igx-toast コンポーネントの show
メソッドと hide
メソッドは非推奨になりました。代わりに open
と close
を使用する必要があります。
例
非表示/自動的に隠す
開いた後は、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';
// import { VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package
...
public open(toast) {
toast.positionSettings.verticalDirection = VerticalAlignment.Top;
toast.open();
}
...
オーバーレイ設定
IgxToastComponent
は、オーバーレイ設定を使用してコンテナーの位置を制御します。デフォルト設定は、カスタム オーバーレイ設定を定義し、それらをトーストの open()
メソッドに渡すことで変更できます。
public customSettings: OverlaySettings = {
positionStrategy: new GlobalPositionStrategy(
{
horizontalDirection: HorizontalAlignment.Left,
verticalDirection: VerticalAlignment.Top
}),
modal: true,
closeOnOutsideClick: true,
};
toast.open(customSettings);
ユーザーは、トーストが表示されたときに DOM に配置される特定のアウトレットを提供することもできます。
<igx-toast [outlet]="igxBodyOverlayOutlet"></igx-toast>
<div #igxBodyOverlayOutlet igxOverlayOutlet></div>
スタイル設定
Toast のスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。
@use "igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
最も簡単な方法は、toast-theme
を拡張する新しいテーマを作成し、$shadow
、$background
、$text-color
と $border-radius
パラメーターを受け取る方法です。
$custom-toast-theme: toast-theme(
$background: #dedede,
$text-color: #151515,
$border-radius: 12px
);
CSS 変数の使用
最後に Toast のカスタム テーマを設定します。
@include css-vars($custom-toast-theme);
ミックスインの使用
Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。
コンポーネントが Emulated
ViewEncapsulation を使用している場合、::ng-deep
を使用してこのカプセル化を解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep
の前に :host
セレクターを含めるようにしてください。
:host {
::ng-deep {
// Custom toast theme を `igx-toast` ミックスインに渡します
@include toast($custom-toast-theme);
}
}
カラー パレットの使用
上記のように色の値をハードコーディングする代わりに、igx-palette
および igx-color
関数を使用して色に関してより高い柔軟性を実現することができます。
igx-palette
は渡された一次色と二次色に基づいてカラーパレットを生成します。
$white-color: #dedede;
$black-color: #151515;
$light-toast-palette: palette($primary: $white-color, $secondary: $black-color);
また igx-color
を使用してパレットから簡単に色を取り出すことができます。
$custom-toast-theme: toast-theme(
$background: color($light-toast-palette, "primary", 400),
$text-color: 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: (
color: ("primary", 400)
),
text-color: (
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: toast-theme(
$palette: $light-toast-palette,
$schema: $custom-light-schema
);
上記と同じ方法でテーマを含める必要があることに注意してください。
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。