ngx-toast (英语)

轻而易举的高性能 无区准备 用于Angular 20+的土司通知库.

Demo 应用程序和使用

查看演示

关键特性

• ⚡ 角 20+ 优化: 完全支持 provideZonelessChangeDetection()。 。 。 .
• 📡 基于信号:以Angular Signals所建,用于反应和高效的状态管理.
• 🎨 FontAsome 整合:内建支持专业偶像画.
• 🛠 可自定义:对持续时间,进度栏,和屏幕位置进行简单控制.
• ♿ 可访问数字 : role="alert", (中文(简体) ), aria-live,键盘解析(Enter/Space/Escape)和焦点样式出框.
• ⏸️ 暂停悬浮: 土司被徘徊或被聚焦时,自动解除计时器和进度栏暂停.
• 🌙 深色模式( B): 通过 CSS 变量重排一切; 自动 prefers-color-scheme 支持加选入 .ngx-toast-dark 课.
• 🧩 全局默认值: 配置位置、 持续时间、 最大堆栈、 拆卸等 provideToast()。 。 。 .
• 🔁 承诺加载土司( L): 一等舱 loading() 财务报告和审定财务报表 promise() 帮助交换位置.
• 🪶 零运行时间:没有RxJS——纯粹由信号驱动.

安装

通过 雅伦数字 :

yarn add ngx-toast

同伴依赖关系

由于该库的视觉组件使用FontAwesome, 请确保您在项目中安装以下组件 :

yarn add @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

配置

在您的 app. config. ts (或 config. ts) 中添加必要的提供者 。 强烈建议使用提供动画Async()进行平稳过渡.

import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimationsAsync(),
    {
      provide: 'INITIALIZE_FA',
      useFactory: (library: FaIconLibrary) => library.addIconPacks(fas),
      deps: [FaIconLibrary]
    }
  ]
};

使用量

1. 增加全球集装箱

将 ngx-toast- 容器放入您的根组件( app. ts 或 app. community.html) 。 这个容器将处理所有活性土司的堆放和定位.

import { ToastContainerComponent } from 'ngx-toast';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ToastContainerComponent],
  template: `
    <router-outlet></router-outlet>
    <ngx-toast></ngx-toast>
  `
})
export class App {}

2. 触发通知

import { Component, inject } from '@angular/core';
import { ToastService } from 'ngx-toast';

@Component({ ... })
export class MyComponent {
  private toastService = inject(ToastService);

  showSuccess() {
    this.toastService.show({
      type: 'success',
      title: 'Success!',
      message: 'The operation was completed successfully.',
      duration: 3000,
      progressBar: true,
      position: 'bottom-right'
    });
  }
}

3. 全球默认(可选)

设置全应用程序默认值 provideToast()。任何值仍然可以推翻每个呼叫.

import { provideToast } from 'ngx-toast';

export const appConfig: ApplicationConfig = {
  providers: [
    provideToast({
      position: 'top-right',
      duration: 4000,
      pauseOnHover: true,
      maxToasts: 5,
      preventDuplicates: true,
      newestOnTop: true,
    }),
  ],
};

4. 装入并许诺吐司

const id = this.toastService.loading('Uploading…');
// later: this.toastService.success('Done!', undefined, { id });

await this.toastService.promise(saveUser(), {
  loading: 'Saving…',
  success: (user) => `Saved ${user.name}`,
  error: (err) => `Failed: ${err}`,
});

服务方法

配置引用

仅限全局选项( E)provideToast(中文(简体) )

他们

五个内置主题—— material, (中文(简体) ), glass, (中文(简体) ), minimal, (中文(简体) ), neon, (中文(简体) ), solid 适用 每个土司或全球:

this.toastService.success('Saved!', undefined, { theme: 'glass' });

<!-- or globally on a wrapper -->
<body class="ngx-toast-theme-material">…</body>

一切都是CSS可变驱动的,所以你可以完全重塑或定义自己的 主题。 覆盖任何地方的标志, 或者切换暗模式 .ngx-toast-dark数字 :

:root {
  --ngx-toast-radius: 12px;
  --ngx-toast-width: 380px;
  --ngx-toast-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

* 全文参考: 文件/主题.md • 妇女 🏗️ 文献/档案

兼容性

这座图书馆由Angular 21及以上建筑. 节点需要24.13.0或更高.

保留此工程: coffee:

我花时间和精力来写和维持这个图书馆 如果它能帮助你并节省你的时间 请考虑捐赠!

谢谢你的支持.

通过 PayPal 捐款

许可证

麻省理工学院执照,由Amine Bouzahar执导.