Toast

Toast 是临时通知，提供关于操作或事件的简洁反馈。

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

引入

要求

必须在使用 addToast 函数之前，将 ToastProvider 添加到应用程序中。这是初始化用于管理 Toast 的上下文所必需的。

使用

颜色

Toast 提供 6 种颜色变体，用于传达不同含义。

变体

半径

Toast 放置

关闭

自定义样式

你可以通过向组件插槽传递自定义 Tailwind CSS 类来定制 Toast。

自定义关闭图标

你可以通过给 closeIcon 属性传递自定义图标，并为 closeButton 插槽传递自定义类名来为 Toast 设置自定义关闭图标。

全局 Toast 属性

你可以向 ToastProvider 传递全局 Toast 属性，以应用于所有 Toast。

数据属性

Toast 在 base 元素上具有以下属性：

• data-has-title：当 Toast 有标题时。
• data-has-description：当 Toast 有描述时。
• data-animation：显示 Toast 当前的动画状态（"entering"、"queued"、"exiting"、"undefined"）。
• data-placement：Toast 在视口中的放置位置。
• data-drag-value：从原始位置拖动 Toast 的值。（在禁用动画时会保持为 "0"）

插槽

Toast 具有以下插槽：

• base：主 Toast 容器元素
• title：标题元素
• description：描述元素
• icon：图标元素
• loadingComponent：在 promise 解析/拒绝之前显示的组件
• content：封装标题、描述和图标内容的容器
• motionDiv：FramerMotion 的 motion.div
• progressTrack：进度条的轨道
• progressIndicator：进度条的指示器
• closeButton：关闭按钮元素
• closeIcon：位于关闭按钮中的图标

可访问性

• Toast 的角色为 alert
• 所有 Toast 都存在于 ToastRegion 中。
• 关闭按钮默认 aria-label 为 'Close'
• 当没有 Toast 时，ToastRegion 会从 DOM 中移除

API

Toast 属性

ToastProvider 属性

ToastRegion 属性

Toast 事件