组件
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>
);
}主题模式
lightdarksystem
使用建议
Toaster通常只挂一次,放在应用根部- 具体通知调用继续使用
sonner的toast - 页面组件不要重复挂多个
Toaster