快速开始
组件
博客
快速开始
组件
博客

Toast 提示消息

NOTE

Toast 是一种轻量的反馈组件，用于显示操作结果、提示信息等。

何时使用

  • 操作成功或失败后的反馈
  • 需要用户注意的提示信息
  • 简短的临时信息

基础用法

在应用根组件中添加 <Toaster />，然后使用 toast() 函数显示提示。

import { toast, Toaster } from "haiku-react-ui"

function Demo() {
  return (
    <>
      <Button onClick={() => toast("操作成功")}>显示 Toast</Button>
      <Toaster />
    </>
  )
}

消息类型

支持多种消息类型：default、success、info、warning、error。

import { toast } from "haiku-react-ui"

// 默认
toast("默认消息")

// 成功
toast.success("成功消息")

// 信息
toast.info("信息消息")

// 警告
toast.warning("警告消息")

// 错误
toast.error("错误消息")

带描述信息

可以显示标题和描述信息。

toast("操作成功", {
  title: "已完成",
  description: "您的文件已成功保存"
})

位置

可以控制 toast 显示的位置。

toast("右上角", { position: "top-right" })
toast("底部居中", { position: "bottom-center" })
toast("左下角", { position: "bottom-left" })

API 参考

toast

属性 类型 说明
message ReactNode 提示消息内容
options ToastOptions 配置选项

ToastOptions

属性 类型 默认值 说明
type "default" | "success" | "info" | "warning" | "error" "default" 消息类型
title ReactNode - 标题
description ReactNode - 描述文字
action { label: string, onClick: () => void } - 操作按钮
duration number 4000 显示时长（毫秒），设为 0 可禁用自动关闭
position ToastPosition "bottom-right" 显示位置

ToastPosition

"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"

Toaster

属性 类型 默认值 说明
position ToastPosition "bottom-right" 默认 toast 位置

使用说明

  1. 必须添加 Toaster: 在应用的根组件（通常是 app/layout.tsx）中添加 <Toaster /> 组件
  2. 全局调用: toast() 函数可以在任何组件中调用，无需传递上下文
  3. 自动关闭: 默认 4 秒后自动关闭
  4. 手动关闭: 点击关闭按钮或调用 toast.dismiss() 关闭
ON THIS PAGE