Sonner
Toast notification component with Zine Mark style messaging
案例展示
Toast 通知在实际场景中的使用示例
基础通知
带操作通知
异步操作反馈
通知类型
不同语义类型的通知
Success
Error
Warning
Info
持续时间
自定义通知显示时长
2 Seconds
5 Seconds
Infinite
使用说明
Toast 位置可通过 Toaster 组件的 position 属性配置
可用位置选项:
top-left | top-center | top-right | bottom-left | bottom-center | bottom-right示例: <Toaster position="top-center" />
自定义内容
完全自定义的 Toast 内容
丰富内容通知
包含更多信息和交互的通知样式
带进度的通知
带头像和详细信息
多操作通知
带列表内容
顶部中央通知
从屏幕顶部中央出现的通知