Toast

基本用法

Edit Code

不同类型

全局提示有 5 种不同的类型，分别为：info、success、warning、error、loading

Edit Code

自定义组件

可以使用基本的createToastStore方法来自定义 toast 组件, 这里我们定义另一种

Edit Code

位置

message 组件的位置可自定义，以下的 message我们定位在了右下角

以下为配置 ToastProvider 的代码

bottom-28(定向到底部)，items-end pr-12(定位到右边)，所以就是 右下方
并且 direction 设为 bottom-to-top ，所以就是从下往上弹出
最后 stack 设为 true ，并且我们使用 stack 模式

tsx
export const toastBottomStore = createToastStore({ maxCount: 6 });

<ToastProvider
  store={toastBottomStore}
  containerProps={{
    className: cs('w-full fixed bottom-12 flex flex-col items-end pr-12 pointer-events-none', `${TOAST_Z_INDEX}`),
  }}
  direction="bottom-to-top"
/>

Edit Code

手动控制关闭

传入showClose可以让 message 显示关闭按钮。点击关闭按钮可以手动关闭 message

Edit Code

更新内容

通过指定 id，可以更新已经存在的 message 内容。注意， duration 值为 null 会取消当前message 消息自动关闭功能

Edit Code