组件

Toaster

用于全局通知展示,视觉层基于 sonner 封装

Toaster

Toaster 是通知容器组件,本身负责渲染通知层。

导入

import { Toaster } from "@downcity/ui";
import { toast } from "sonner";

挂载容器

import { Toaster } from "@downcity/ui";

export function AppShell() {
  return (
    <>
      <Toaster theme="light" position="top-center" richColors />
      <main>...</main>
    </>
  );
}

触发通知

import { Button } from "@downcity/ui";
import { toast } from "sonner";

export function SaveAction() {
  return (
    <Button
      size="sm"
      onClick={() => {
        toast.success("保存成功");
      }}
    >
      保存
    </Button>
  );
}

主题模式

  • light
  • dark
  • system

使用建议

  • Toaster 通常只挂一次,放在应用根部
  • 具体通知调用继续使用 sonnertoast
  • 页面组件不要重复挂多个 Toaster

继续阅读