警告提示

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

安装

上述命令仅用于单独安装。如果 @heroui/react 已全局安装，则可以跳过此步骤。

导入

用法

颜色

警告提示提供 6 种颜色变体以表达不同含义。

变体

圆角

自定义图标

默认情况下，Alert 组件会根据 color 属性显示相应的图标。您可以通过使用 icon 属性提供自定义图标来覆盖此默认行为。

没有图标

您可以通过将 hideIcon 属性设置为 true 来隐藏图标。

没有图标容器

您可以通过将 hideIconWrapper 属性设置为 true 来隐藏图标容器。

带有操作

Alert 组件支持 endContent 属性，用于添加额外的操作。

可控的可见性

您可以使用 isVisible 和 onVisibleChange 属性来控制 alert 组件的可见性。

自定义样式

您可以通过将自定义 Tailwind CSS 类传递给组件插槽来自定义 alert 组件的样式。

自定义实现

您可以使用 useAlert hook 来创建您自己的 alert 组件。

数据属性

Alert 组件在其 base 元素上具有以下属性

• data-visible: 何时 alert 组件可见
• data-closeable: 何时 alert 组件可以关闭
• data-has-title: 何时 alert 组件有标题
• data-has-description: 何时 alert 组件有描述

插槽

Alert 组件具有以下插槽

• base: 主要的 alert 容器元素
• title: 标题元素
• description: 描述元素
• mainWrapper: 标题和描述内容的容器
• closeButton: 关闭按钮元素
• iconWrapper: alert 图标的容器
• alertIcon: alert 图标元素

可访问性

• Alert 组件的角色是 alert
• 默认情况下，关闭按钮具有 aria-label="Close"
• 关闭后，alert 组件将从 DOM 中移除

API

Alert 组件属性

Alert 组件事件