Toast 轻提示toast() · Toaster

基本用法

在任何地方（组件里、事件回调里、请求的 then 里）直接调用 toast()，不需要 hook。页面根部要挂一个 <Toaster />（本站已挂）。传字符串只有标题；传对象可以带说明。返回值是这条通知的 id。

状态

toast.success / warning / danger / info 是带状态色的简写（toast.error 是 danger 的别名），也可以在对象里写 tone。每种状态有自己的图标：圆底先弹出来，符号再描线画出。

带操作

action 在通知右侧放一个按钮，最常见的是“撤销”。点了之后默认关掉这条通知；action.dismiss 设为 false 则保留。带操作的通知建议把时间放长一些，给人够得着的机会。

时长与常驻

默认 4.2 秒后消失；指针停在通知上、或键盘焦点在通知里时暂停计时。duration 单独指定时长（毫秒），0 表示一直留着——常驻的通知自动带关闭按钮。也可以用 closable 给会自动消失的通知加上关闭按钮。点通知本身的任意位置也会关掉它。

原地更新

给通知一个固定的 id：同一个 id 再次调用会原地更新内容并重新计时，而不是新增一条。适合“进行中 → 完成 / 失败”。

手动关闭

toast.dismiss(id) 关掉某一条，不传 id 则全部关掉。onDismiss 在通知消失之后回调。

位置

位置是 <Toaster /> 的属性，整个应用统一设置一次，不是每条通知各自决定。一共六个位置，默认 top-right；靠下的位置里最新的一条贴着底边，旧的往上让。窄于 520px 时一律横向撑满，只分上下。同时最多显示 max 条（默认 4），超出时最旧的先退场。

本站在根部挂的是默认位置的 Toaster，所以这一页的通知都出现在右上角。一个应用里只挂一个 Toaster；挂多个的话每条通知会在每个出口各显示一次。

import { Toaster } from 'oink-ui';

export function App() {
  return (
    <>
      <Routes />
      {/* 应用根部挂一次 */}
      <Toaster position="bottom-center" max={3} duration={5000} offset={24} />
    </>
  );
}

规格

接口