Toast

用于向用户显示临时消息

"use client"

import { Button } from "@chakra-ui/react"
import { toaster } from "@/components/ui/toaster"

const Demo = () => {
  return (
    <Button
      variant="outline"
      size="sm"
      onClick={() =>
        toaster.create({
          description: "File saved successfully",
          type: "info",
        })
      }
    >
      Show Toast
    </Button>
  )
}

设置

如果您还没有该代码片段，请运行以下命令添加toaster 代码片段

npx @chakra-ui/cli snippet add toaster

该代码片段包含 `Toast` 组件的封闭组件组合。

用法

import { Toaster, toaster } from "@/components/ui/toaster"

首先，在您的应用中渲染 Toaster 组件。

<Toaster />

然后，通过调用 toaster 函数创建一个 toast。

toaster.create({
  title: "Toast Title",
  description: "Toast Description",
})

示例

可关闭的 Toast

将 closable 属性设置为 true 可创建一个可关闭的 toast。

"use client"

import { Button } from "@chakra-ui/react"
import { toaster } from "@/components/ui/toaster"

const Demo = () => {
  return (
    <Button
      variant="outline"
      size="sm"
      onClick={() =>
        toaster.create({
          description: "File saved successfully",
          type: "info",
          closable: true,
        })
      }
    >
      Show Toast
    </Button>
  )
}

外部关闭

使用 toaster.dismiss 方法关闭 toast。

toaster.dismiss(id): 根据 ID 关闭 toast。
toaster.dismiss(): 关闭所有 toast。

"use client"

import { Button, HStack } from "@chakra-ui/react"
import { toaster } from "@/components/ui/toaster"

const Demo = () => {
  return (
    <HStack>
      <Button
        variant="outline"
        size="sm"
        onClick={() =>
          toaster.create({
            description: "File saved successfully",
            type: "info",
          })
        }
      >
        Show Toast
      </Button>

      <Button variant="outline" size="sm" onClick={() => toaster.dismiss()}>
        Close Toasts
      </Button>
    </HStack>
  )
}

类型

以下是每种类型 toast 的示例。

"use client"

import { Button, For, HStack } from "@chakra-ui/react"
import { toaster } from "@/components/ui/toaster"

const Demo = () => {
  return (
    <HStack>
      <For each={["success", "error", "warning", "info"]}>
        {(type) => (
          <Button
            size="sm"
            variant="outline"
            key={type}
            onClick={() =>
              toaster.create({
                title: `Toast status is ${type}`,
                type: type,
              })
            }
          >
            {type}
          </Button>
        )}
      </For>
    </HStack>
  )
}

带操作

使用 action 和 actionLabel 属性为 toast 添加操作。

当操作触发器被点击时，toast 将被关闭。

"use client"

import { Button } from "@chakra-ui/react"
import { toaster } from "@/components/ui/toaster"

const Demo = () => {
  return (
    <Button
      variant="outline"
      size="sm"
      onClick={() =>
        toaster.success({
          title: "Update successful",
          description: "File saved successfully to the server",
          action: {
            label: "Undo",
            onClick: () => console.log("Undo"),
          },
        })
      }
    >
      Click me
    </Button>
  )
}

持久性 Toast

将 type 属性设置为 "loading" 可创建一个持久性 toast。

"use client"

import { Button } from "@chakra-ui/react"
import { toaster } from "@/components/ui/toaster"

const Demo = () => {
  return (
    <Button
      variant="outline"
      size="sm"
      onClick={() =>
        toaster.create({
          description: "File saved successfully",
          type: "loading",
        })
      }
    >
      Show Toast
    </Button>
  )
}

Promise

使用 toaster.promise 创建一个在 promise 解决时解决的 toast。

接下来，您可以为 promise 的每个状态定义 toast 选项（标题、描述等）。

"use client"

import { Button } from "@chakra-ui/react"
import { toaster } from "@/components/ui/toaster"

const Demo = () => {
  return (
    <Button
      variant="outline"
      size="sm"
      onClick={() => {
        const promise = new Promise<void>((resolve) => {
          setTimeout(() => resolve(), 5000)
        })

        toaster.promise(promise, {
          success: {
            title: "Successfully uploaded!",
            description: "Looks great",
          },
          error: {
            title: "Upload failed",
            description: "Something wrong with the upload",
          },
          loading: { title: "Uploading...", description: "Please wait" },
        })
      }}
    >
      Show Toast
    </Button>
  )
}

自定义持续时间

使用 duration 属性设置 toast 的持续时间。

"use client"

import { Button } from "@chakra-ui/react"
import { toaster } from "@/components/ui/toaster"

const Demo = () => {
  return (
    <Button
      variant="outline"
      size="sm"
      onClick={() =>
        toaster.create({
          description: "File saved successfully",
          duration: 6000,
        })
      }
    >
      Show Toast
    </Button>
  )
}

暂停和播放

使用 toaster 对象上的 pause 和 resume 方法来暂停和播放 toast。

暂停 toast 可防止其超时，而恢复它将使用剩余持续时间重新启用超时。

"use client"

import { Button, HStack } from "@chakra-ui/react"
import { toaster } from "@/components/ui/toaster"
import { useId, useState } from "react"
import { HiPause, HiPlay } from "react-icons/hi"

const Demo = () => {
  const id = useId()
  const [paused, setPaused] = useState(false)
  const [shown, setShown] = useState(false)

  const show = () => {
    toaster.success({
      id,
      title: "This is a success toast",
      onStatusChange: (details) => {
        if (details.status === "visible") {
          setShown(true)
        } else if (details.status === "dismissing") {
          setShown(false)
        }
      },
    })
  }

  const pause = () => {
    toaster.pause(id)
    setPaused(true)
  }

  const play = () => {
    toaster.resume(id)
    setPaused(false)
  }

  return (
    <HStack>
      <Button variant="outline" size="sm" onClick={show} disabled={shown}>
        Show Toast
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={pause}
        disabled={!shown || paused}
      >
        <HiPause />
        Pause Toast
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={play}
        disabled={!shown || !paused}
      >
        <HiPlay />
        Play Toast
      </Button>
    </HStack>
  )
}

生命周期

使用 toaster 函数上的 onStatusChange 属性来监听 toast 状态的变化。

"use client"

import { Button, HStack, Stack, Text } from "@chakra-ui/react"
import { toaster } from "@/components/ui/toaster"
import { useState } from "react"

const Demo = () => {
  const [statusLog, setStatusLog] = useState<[number, string][]>([])
  const [dismissed, setDismissed] = useState(true)

  return (
    <Stack align="flex-start">
      <Button
        disabled={!dismissed}
        variant="outline"
        size="sm"
        onClick={() =>
          toaster.create({
            description: "This is a toast",
            type: "info",
            onStatusChange({ status }) {
              setDismissed(status === "unmounted")
              setStatusLog((prev) => [[Date.now(), status], ...prev])
            },
          })
        }
      >
        Show Toast
      </Button>

      <Stack padding="2" width="full" role="log" borderWidth="1px" minH="100px">
        {statusLog.map(([time, toastStatus], i) => {
          const date = new Date(time)
          return (
            <HStack as="pre" fontFamily="mono" textStyle="sm" key={i}>
              {date.toLocaleTimeString()}{" "}
              <Text fontWeight="bold">{toastStatus}</Text>
            </HStack>
          )
        })}
      </Stack>
    </Stack>
  )
}

最大可见 Toast 数量

在 createToaster 函数上设置 max 属性以定义同时可渲染的 toast 的最大数量。任何额外的 toast 将被排队，并在一个 toast 被关闭后渲染。

@/components/ui/toaster.tsx

const toaster = createToaster({
  max: 3,
})

位置

Toast 可以在页面的四个角落显示。我们建议选择一个所需位置并在 createToaster 函数中配置它。

@/components/ui/toaster.tsx

const toaster = createToaster({
  placement: "top-end",
})

重叠 Toast

默认情况下，toast 会相互堆叠。要使 toast 相互重叠，请在 createToaster 函数中将 overlap 属性设置为 true。

@/components/ui/toaster.tsx

const toaster = createToaster({
  placement: "top-end",
  overlap: true,
})

偏移

在 createToaster 函数中设置 offset 属性，使 toast 偏离屏幕边缘。

@/components/ui/toaster.tsx

const toaster = createToaster({
  offsets: "20px",
})

或者，您可以使用 offset 属性来设置屏幕每个边缘的偏移量。

@/components/ui/toaster.tsx

const toaster = createToaster({
  offsets: { left: "20px", top: "20px", right: "20px", bottom: "20px" },
})

时间线

切换提示

Toast

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}设置

设置