Ngx-Sonner 使用教程

Ngx-Sonner 使用教程

ngx-sonner An opinionated toast component for Angular. A port of @emilkowalski's sonner. 项目地址: https://gitcode.com/gh_mirrors/ng/ngx-sonner

1. 项目介绍

Ngx-Sonner 是一个为 Angular 设计的意见化 Toast 组件。它基于 React 实现的 sonner 组件进行移植，为 Angular 应用提供了一种方便的方式来显示通知消息。这个组件支持多种类型的通知，包括成功、信息、警告和错误等，并且可以通过配置自定义图标、按钮和动画等。

2. 项目快速启动

首先，您需要使用喜欢的包管理器安装 ngx-sonner：

npm i ngx-sonner
# 或者
yarn add ngx-sonner
# 或者
pnpm add ngx-sonner
# 或者
bun add ngx-sonner

接着，在您的 Angular 应用中引入 <ngx-sonner-toaster /> 组件，它将作为所有 Toast 的渲染位置。之后，您可以在应用的任何地方使用 toast() 方法来显示 Toast。

import { toast, NgxSonnerToaster } from 'ngx-sonner';

@Component({
  selector: 'app-root',
  imports: [NgxSonnerToaster],
  template: `
    <ngx-sonner-toaster />
    <button (click)="toast('我的第一个 Toast')">给我一个 Toast</button>
  `
})
export class AppComponent {
  protected readonly toast = toast;
}

3. 应用案例和最佳实践

以下是几个使用 ngx-sonner 的案例：

默认 Toast

最基本的 Toast，可以通过传递一个选项对象作为第二个参数来自定义。

toast('事件已创建');

带有自定义图标和描述的 Toast

toast('事件已创建', {
  description: '星期一，1月3日 18:00',
  icon: IconComponent
});

成功 Toast

渲染一个消息前带有勾选图标。

toast.success('事件已创建');

信息 Toast

渲染一个消息前带有问号图标。

toast.info('事件有新信息');

警告 Toast

渲染一个消息前带有警告图标。

toast.warning('事件有警告');

错误 Toast

渲染一个消息前带有错误图标。

toast.error('事件未创建');

带有操作按钮的 Toast

渲染一个主要按钮，点击后会关闭 Toast 并执行回调。

toast('我的操作 Toast', {
  action: {
    label: '操作',
    onClick: () => console.log('操作!')
  }
});

带有取消按钮的 Toast

渲染一个次要按钮，点击后会关闭 Toast 并执行回调。

toast('我的取消 Toast', {
  cancel: {
    label: '取消',
    onClick: () => console.log('取消!')
  }
});

带有 Promise 的 Toast

开始时为加载状态，Promise 解决或失败后会自动更新。

toast.promise(
  () => new Promise(resolve => setTimeout(resolve, 2000)),
  {
    loading: '加载中',
    success: '成功',
    error: '错误'
  }
);

加载 Toast

渲染一个带有加载旋转器的 Toast。

toast.loading('加载数据');

使用自定义组件的 Toast

可以传递一个组件作为第一个参数来渲染自定义组件。

toast(CustomComponent);

4. 典型生态项目

目前没有明确指出与 ngx-sonner 相关的典型生态项目。不过，开发者可以探索与 Angular 相关的项目，如 UI 库、状态管理工具或者其他与 Angular 集成的通知服务，来构建更完善的应用生态系统。

ngx-sonner An opinionated toast component for Angular. A port of @emilkowalski's sonner. 项目地址: https://gitcode.com/gh_mirrors/ng/ngx-sonner