Feedback
Toast 通知
一个包含成功、错误、警告和信息变体的 Toast 通知系统。
作者：mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度intermediate
英文提示词
Create a toast notification system with 4 variants: success (green), error (red), warning (yellow), and info (blue). Each toast includes an icon, title, message, and dismiss button. Toasts auto-dismiss after 4 seconds, stack in the top-right corner, and support swipe-to-dismiss on mobile. Use shadcn/ui Sonner or Toast and Tailwind CSS. Provide a demo button panel to trigger each variant.
中文提示词
创建一个 toast 通知系统，包含 4 种变体：成功（绿色）、错误（红色）、警告（黄色）和信息（蓝色）。每个 toast 包含图标、标题、消息和关闭按钮。toast 在 4 秒后自动关闭，在右上角堆叠，并支持移动端滑动关闭。使用 shadcn/ui Sonner 或 Toast 以及 Tailwind CSS。提供一个演示按钮面板来触发每种变体。
概述
一个完整的用户反馈 toast 通知系统。涵盖所有常见状态并包含演示面板。
功能特性
- 4 种通知变体
- 图标和关闭按钮
- 定时自动关闭
- 堆叠定位
- 移动端滑动关闭
- 演示触发面板
使用方法
将提示词复制到 v0 或 Cursor 中。将 toast 触发器连接到你的应用事件和表单。
自定义选项
修改提示词以：
- 更改位置（底部居中、左上角）
- 在 toast 内添加操作按钮
- 添加进度条倒计时
- 在侧边栏中持久化通知