Alert 警告提示
Alert 警告提示
警告提示是临时通知，用于提供关于操作或事件的简洁反馈。
Storybook@heroui/alertSourceStyles source
安装
CLIpnpmnpmyarnbunThe above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.
导入
IndividualGlobal
用法
PreviewCodeOpen in Chat
颜色
警告提示提供 6 种颜色变体以传达不同含义。
PreviewCodeOpen in Chat
变体
PreviewCodeOpen in Chat
圆角
PreviewCodeOpen in Chat
自定义图标
默认情况下，警告提示会根据 color 属性显示相应的图标。您可以使用 icon 属性提供自定义图标来覆盖此设置。
PreviewCodeOpen in Chat
无图标
您可以通过将 hideIcon 属性设置为 true 来隐藏图标。
PreviewCodeOpen in Chat
无图标包装器
您可以通过将 hideIconWrapper 属性设置为 true 来隐藏图标包装器。
PreviewCodeOpen in Chat
带操作
警告提示支持 endContent 属性以添加额外操作。
PreviewCodeOpen in Chat
受控可见性
您可以使用 isVisible 和 onVisibleChange 属性来控制警告提示的可见性。
PreviewCodeOpen in Chat
自定义样式
您可以通过向组件插槽传递自定义的 Tailwind CSS 类来定制警告提示。
PreviewCodeOpen in Chat
自定义实现
您可以使用 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 属性
PropTypeDefaulttitleReactNodeiconReactNodedescriptionReactNodecolordefault | primary | secondary | success | warning | danger"default"variantsolid | bordered | flat | faded"flat"radiusnone | sm | md | lg | full"md"startContentReactNodeendContentReactNodeisVisiblebooleanisClosablebooleanfalsehideIconbooleanfalsehideIconWrapperbooleanfalsecloseButtonPropsButtonProps
Alert 事件
PropTypeDefaultonClose() => voidonVisibleChange(isVisible: boolean) => void