Angular Toast 通知服务 | ng-hub-ui-toast

standalone 的 Angular toast 通知服务,支持 Signals、生命周期 observables、进度条、六个位置以及完整的 CSS 变量主题化。

交互式示例

探索实时示例,了解该库在常见 Angular 用例中的表现。

基本类型

配置选项

定位

防止重复

Click the button multiple times. With preventDuplicates enabled, only one toast with the same message will appear.

最大打开数与 autoDismiss

When autoDismiss is false, new toasts are silently dropped once the cap is reached. When true, the oldest toast is removed to make room.

生命周期 observables

Events will appear here…

CSS 变量主题化

Active token overrides (applied to this demo's container):

--hub-toast-border-radius: 0.75rem;
--hub-toast-shadow: 0 4px 20px rgba(0,0,0,.18);
--hub-toast-padding-x: 1.25rem;
--hub-toast-padding-y: 1rem;
--hub-toast-font-size: 0.9rem;

Tokens are injected from the page's stylesheet or from a style binding on any ancestor element — the container reads them via CSS inheritance.