Angular トースト通知サービス | ng-hub-ui-toast

Signals、ライフサイクル Observable、プログレスバー、6 つの配置位置、完全な CSS 変数によるテーマ設定を備えた standalone な Angular トースト通知サービス。

API リファレンス

toast の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

インプット

12 個のインプットで toast を調整。通常の Angular @Input と同じようにバインドできます。

名前型デフォルト説明
data (hub-toast)必須HubToastData—レンダリングするトースト:id、type、message、省略可能な title、解決済みの設定、およびライフサイクルの Subject を含みます。ToastContainerComponent によって内部的に提供されるため、通常は自分でバインドすることはありません。
position (hub-toast-container)HubToastPosition | string'toast-top-right'このコンテナが受け持つ表示位置です。positionClass が一致するトーストだけを描画するため、新しい通知が表示中のトーストを動かすことはありません。ToastService がコンテナのマウント時に設定します。
timeOut / extendedTimeOut (config)number5000 / 2500timeOut は自動で閉じるまでの時間(ミリ秒、0 = 常時表示)です。extendedTimeOut は、ユーザーがトーストのホバーをやめた後に追加で与えられる時間です。
closeButton / progressBar (config)booleantrue / falsecloseButton はトーストに閉じるボタンを表示し、progressBar は自動で閉じるまでのカウントダウンバーを表示します。
closeButtonAriaLabel (config)string'Close'閉じるボタンに読み上げられるアクセシブル名。× の字形は装飾のため、スクリーンリーダーが持つ名前はこれだけです。英語以外のアプリケーションでは翻訳してください。
tapToDismiss (config)booleantrueユーザーがトースト上のどこかをクリックするとトーストを閉じます。
disableTimeOut (config)boolean | 'timeOut' | 'extendedTimeOut'false自動で閉じる動作を無効にします:true または 'timeOut' は最初のタイマーを無効にし、'extendedTimeOut' はホバーによる延長のみを無効にします。
newestOnTop (config)booleantruetrue の場合、最新のトーストがスタックの下ではなく上に挿入されます。
positionClass (config)HubToastPosition | string'toast-top-right'このトーストを表示する位置です。組み込みの 6 クラス toast-top/bottom-left/center/right のいずれか、または独自のクラス文字列を指定します。位置ごとに専用のコンテナが用意されます。
maxOpened (config)number0同時に表示できるトーストの最大数です。角ごとではなく全表示位置の合計で数えます。0 は無制限です。
autoDismiss (config)booleanfalsemaxOpened に達すると、場所を空けるために画面上でもっとも古いトーストを自動的に削除します。上限は全体で数えるため、別の角に表示されているものが対象になることもあります。オフの場合は呼び出し自体が破棄され、その HubToastRef は dropped: true を報告します。
preventDuplicates (config)booleanfalseメッセージとタイプがすでに表示中のトーストと一致する新しいトーストを無視し、代わりに既存のトーストのハンドルを返します。

アウトプット

toast の動作に反応 — ロジックを接続できる 1 個のイベント。

名前型説明
closed (hub-toast)OutputEmitterRef<number>トーストを閉じるべきときにトースト id を発行します — 自動で閉じるタイマーの満了後、tapToDismiss によるタップ、または閉じるボタンが契機になります。

メソッド

toast をコードから操作 — プログラム操作のための 7 個のメソッドを備えています。

名前シグネチャ戻り値説明
HubToastService.successsuccess(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the toast, or a handle with dropped: true when the stack was full指定されたメッセージ、省略可能なタイトル、および呼び出し単位の設定上書きで成功トーストを表示します。
HubToastService.errorerror(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the toast, or a handle with dropped: true when the stack was full指定されたメッセージ、省略可能なタイトル、および呼び出し単位の設定上書きでエラートーストを表示します。
HubToastService.warningwarning(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the toast, or a handle with dropped: true when the stack was full指定されたメッセージ、省略可能なタイトル、および呼び出し単位の設定上書きで警告トーストを表示します。
HubToastService.infoinfo(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the toast, or a handle with dropped: true when the stack was full指定されたメッセージ、省略可能なタイトル、および呼び出し単位の設定上書きで情報トーストを表示します。
HubToastService.showshow(message: string, title?: string, config?: Partial<HubToastConfig>, type?: HubToastType | string): HubToastRefHubToastRef handle for the toast, or a handle with dropped: true when the stack was full組み込みまたはカスタムのタイプ文字列でトーストを表示します。タイプはトーストのホストに data-type として適用され、アクセントのスタイリングを決定します。
HubToastService.removeremove(toastId: number): voidvoid表示系メソッドから返された id を使って、特定のトーストを削除します。
HubToastService.clearclear(): voidvoidアクティブなすべてのトーストを直ちに削除し、各トーストの onHidden の Observable を完了させます。

テンプレート

テンプレートはまだドキュメント化されていません。