Alert 警告提示

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

安装

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

导入

用法

颜色

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

变体

圆角

自定义图标

默认情况下，警告提示会根据 color 属性显示相应的图标。您可以使用 icon 属性提供自定义图标来覆盖此设置。

无图标

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

无图标包装器

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

带操作

警告提示支持 endContent 属性以添加额外操作。

受控可见性

您可以使用 isVisible 和 onVisibleChange 属性来控制警告提示的可见性。

自定义样式

您可以通过向组件插槽传递自定义的 Tailwind CSS 类来定制警告提示。

自定义实现

您可以使用 useAlert 钩子来创建您自己的警告提示组件。

数据属性

警告提示在 base 元素上具有以下属性:

• data-visible: 当警告提示可见时
• data-closeable: 当警告提示可关闭时
• data-has-title: 当警告提示有标题时
• data-has-description: 当警告提示有描述时

插槽

警告提示具有以下插槽:

• base: 主警告提示容器元素
• title: 标题元素
• description: 描述元素
• mainWrapper: 标题和描述内容的包装器
• closeButton: 关闭按钮元素
• iconWrapper: 警告提示图标包装器
• alertIcon: 警告提示图标元素

无障碍访问

• 警告提示具有 alert 角色
• 默认情况下关闭按钮具有 aria-label="关闭"
• 关闭后，警告提示将从 DOM 中移除

API

Alert 属性

Alert 事件