Sonner.tsx

基本信息

类型: React 组件 (shadcn/ui)
路径: ./src/components/ui/sonner.tsx

功能描述

Toast 通知组件，用于显示全局消息提示。基于 sonner 库，支持多种类型（成功、错误、警告、加载等）。

导出内容

Toaster - Toast 容器组件

Props 接口

Toaster

属性	类型	必填	默认值	说明
position	`ToasterProps['position']`	否	-	显示位置
richColors	`boolean`	否	-	是否使用丰富颜色
expand	`boolean`	否	-	是否展开显示
duration	`number`	否	-	显示时长（毫秒）
...props	`ToasterProps`	否	-	sonner 其他属性

Toast 类型

组件预设了以下图标：

success - 成功（CircleCheckIcon）
info - 信息（InfoIcon）
warning - 警告（TriangleAlertIcon）
error - 错误（OctagonXIcon）
loading - 加载中（Loader2Icon）

依赖

sonner - Toast 库
next-themes - 主题管理
lucide-react - 图标库

使用示例

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

// 在布局中添加 Toaster
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

// 显示 Toast
function Demo() {
  return (
    <div>
      <Button onClick={() => toast("默认消息")}>
        显示 Toast
      </Button>
      <Button onClick={() => toast.success("操作成功！")}>
        成功
      </Button>
      <Button onClick={() => toast.error("操作失败！")}>
        错误
      </Button>
      <Button onClick={() => toast.warning("请注意！")}>
        警告
      </Button>
      <Button onClick={() => toast.info("提示信息")}>
        信息
      </Button>
      <Button onClick={() => toast.loading("加载中...")}>
        加载
      </Button>
      
      {/* 带描述的 Toast */}
      <Button onClick={() => toast.message("标题", {
        description: "这里是详细描述信息"
      })}>
        带描述
      </Button>
    </div>
  );
}