Toast 轻提示

import { Cell, Toast } from "@taroify/core"

function ImperativeToast() {
  return (
    <>
      {/* <Toast id="toast" /> */}
      <Cell title="函数调用" clickable isLink onClick={() => Toast.open("文字提示")} />
    </>
  )
}

import { Cell, Toast } from "@taroify/core"

function BasicToast() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Toast open={open} onClose={setOpen}>
        文字提示
      </Toast>
      <Cell title="基础用法" clickable onClick={() => setOpen(true)} />
    </>
  )
}

Toast.open({ type: "loading", message: "加载中..." })}

<Toast open type="loading">
  加载中...
</Toast>

Toast.open({ type: "success", message: "成功文案" })
Toast.open({ type: "fail", message: "失败文案" })

<Toast open type="success">成功文案</Toast>
<Toast open type="fail">失败文案</Toast>

Toast.open({ message: "自定义图标", icon: <LikeOutlined /> })
Toast.open({
  message: "自定义图片",
  icon: (
    <Image
      style={{
        width: "40px",
        height: "40px",
      }}
      src="https://img01.yzcdn.cn/vant/logo.png"
    />
  ),
})

<Toast open icon={<LikeOutlined />}>自定义图标</Toast>
<Toast
  open
  icon={<Image style={{ width: "1em", height: "1em" }}
  src="https://img01.yzcdn.cn/vant/logo.png" />}
>
  自定义图片
</Toast>
<Toast open icon={<Loading />}>加载中...</Toast>

Toast.open({
  position: "top",
  message: "顶部展示",
})
Toast.open({
  position: "bottom",
  message: "顶部展示",
})

<Toast open position="top">顶部展示</Toast>
<Toast open position="bottom">底部展示</Toast>

import { Cell, Toast } from "@taroify/core"

function MultipleToast() {
  return (
    <>
      <Cell 
        title="允许多个实例" 
        clickable 
        isLink 
        onClick={() => {
          Toast.allowMultiple(true)
          // 同时展示多个 Toast
          Toast.success("成功提示")
          setTimeout(() => {
            Toast.fail("失败提示")
          }, 1000)
        }} 
      />
    </>
  )
}

import { Cell, Toast } from "@taroify/core"

function MultipleToastClose() {
  return (
    <>
      <Cell 
        title="关闭特定 Toast 实例" 
        clickable 
        isLink 
        onClick={() => {
          // 启用多例模式
          Toast.allowMultiple(true)
          
          // 创建并保存 Toast 实例标识符
          const toast1 = Toast.success("成功提示")
          const toast2 = Toast.loading("加载中...")
          
          // 3秒后只关闭成功提示，保留加载提示
          setTimeout(() => {
            // 直接使用 close 方法关闭特定的 Toast
            if (toast1) {
              Toast.close(toast1)
            }
          }, 3000)
        }} 
      />
    </>
  )
}