React 组件

UGToaster 通知

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

导入方式

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

tsx

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

变体预览

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

状态展示

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

尺寸展示

窄屏自动贴合两侧安全边距，sm 起使用固定宽度；消息文案仍应保持简洁。

短消息：保存成功

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

代码示例

UGToaster 只需要在页面中挂载一次；自动关闭会在悬停和键盘操作期间暂停。

tsx

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

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

属性

属性	类型	默认值	说明
toast.success	(message: string, options?: ToastOptions) => void	—	显示非打断式成功提示。
toast.error	(message: string, options?: ToastOptions) => void	—	显示需要即时播报的错误提示。
toast.info	(message: string, options?: ToastOptions) => void	—	显示非打断式信息提示。
options.duration	number \| null	5000	自动关闭毫秒数；悬停或键盘焦点进入时暂停，传 null 时保持到手动关闭。