Ignite UI for Angular 10.2.4 バージョン時点での情報に基づいています。
IgxToastのpositionを使用して、トーストメッセージの位置を指定できます。指定できる位置は、
- “top”: 上部に表示する
- “middle”: 縦中央に表示する
- “bottom”: 下部に表示する
の3種類です。”bottom”が既定値です。
<!-- app.component.html --> <igx-toast #toast [position]="toastPosition">トーストメッセージ</igx-toast>
// app.component.ts
export class AppComponent implements OnInit {
public toastPosition: IgxToastPosition;
// ...中略...
ngOnInit(): void {
this.toastPosition = "top"; // 上部に出す場合のコード
}
}
実行結果
サンプル
リファレンス
- IgxToastComponentの「配置」