Solid-Toast 使用教程

Solid-Toast 使用教程

solid-toastCustomizable Toast Notifications for SolidJS项目地址:https://gitcode.com/gh_mirrors/so/solid-toast

项目介绍

Solid-Toast 是一个为 SolidJS 设计的可自定义的 Toast 通知库。它提供了轻量级、易用且支持服务端渲染（SSR）的通知功能。Solid-Toast 允许开发者轻松创建美观的 Toast 通知，并提供了丰富的自定义选项，如样式、位置和持续时间等。

项目快速启动

安装

你可以使用 Yarn 或 NPM 来安装 Solid-Toast：

# 使用 Yarn
yarn add solid-toast

# 使用 NPM
npm install solid-toast

基本使用

首先，在你的组件树中添加 <Toaster /> 组件，这将渲染所有的 Toast 通知。然后，你可以从任何地方调用 toast 函数来触发通知。

import { createSignal } from 'solid-js';
import toast, { Toaster } from 'solid-toast';

const notify = () => toast('Here is your toast');

const App = () => {
  return (
    <div>
      <button onClick={notify}>Make me a toast</button>
      <Toaster />
    </div>
  );
};

export default App;

应用案例和最佳实践

自定义 Toast

你可以通过传递一个函数来创建自定义的 Toast 通知，并使用 unmountDelay 选项来控制关闭动画的持续时间。

import toast from 'solid-toast';

const customToast = () => {
  toast.custom(
    (t) => (
      <div>
        <h1>Custom Toast</h1>
        <p>This is a custom toast</p>
        <p>{t.visible ? 'Showing' : 'I will close in 1 second'}</p>
        <button onClick={() => toast.dismiss(t.id)}>Close Toast</button>
      </div>
    ),
    { unmountDelay: 1000 }
  );
};

手动关闭 Toast

你可以通过 toast.dismiss 函数手动关闭 Toast 通知。如果不传递参数，它将关闭所有的 Toast 通知。

const toastId = toast.loading('Loading...');
// 稍后关闭
toast.dismiss(toastId);

// 关闭所有 Toast
toast.dismiss();

典型生态项目

Solid-Toast 可以与许多其他 SolidJS 生态项目结合使用，例如：

• SolidJS Router: 在路由变化时显示 Toast 通知。
• SolidJS Context API: 在应用的不同部分共享 Toast 通知状态。
• SolidJS Testing Library: 在测试中模拟 Toast 通知。

通过这些结合使用，你可以构建更加丰富和交互性的 SolidJS 应用。

solid-toastCustomizable Toast Notifications for SolidJS项目地址:https://gitcode.com/gh_mirrors/so/solid-toast