@ug666/react 文档演示

Toast 通知

Toast 提供轻量级全局通知能力，适合保存结果、接口异常与流程提示。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Toaster, toast } from '@ug666/react'

变体预览

点击按钮分别触发 success、error 与 info 通知。

状态展示

通常与提交中、完成、失败等动作结果结合。

尺寸展示

Toast 本身宽度固定，建议保持消息文案简洁。

短消息：保存成功

长消息：已成功同步 24 个组件文档页面与 2 个基础导航页面。

代码示例

Toaster 只需要在页面中挂载一次。

import { Button, Toaster, toast } from '@ug666/react'

export function SaveActions() {
  return (
    <>
      <Toaster />
      <Button onClick={() => toast.success('保存成功')}>触发成功通知</Button>
    </>
  )
}

Props 说明

属性	类型	默认值	说明
toast.success	(message: string) => void	—	显示成功提示。
toast.error	(message: string) => void	—	显示错误提示。
toast.info	(message: string) => void	—	显示信息提示。