React 组件

UGToaster 通知

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

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGToaster, toast } from '@ug666/ui-react'

变体预览

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

状态展示

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

尺寸展示

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

短消息：保存成功

长消息：已成功保存 42 条记录，并通知 2 个协作成员。

代码示例

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

tsx

import { UGButton, UGToaster, toast } from '@ug666/ui-react'

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

Props

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