警告

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

安装

上面的命令仅用于单独安装。如果 @nextui-org/react 已经全局安装，则可以跳过此步骤。

导入

用法

颜色

警告带有 6 种颜色变体，以传达不同的含义。

变体

圆角

自定义图标

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

无图标

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

无图标包装器

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

带有操作

Alert 支持一个用于添加额外操作的 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

警报属性

警报事件