AlertDialog 警告对话框#

何时使用#

• 用户执行不可逆操作前的确认
• 需要用户明确知悉风险的场景
• 关键操作的二次确认

代码演示#

API 参考#

AlertDialog#

属性	类型	默认值	说明
open	boolean	-	受控打开状态
onOpenChange	(open: boolean) => void	-	状态变化回调
defaultOpen	boolean	false	非受控模式默认状态
variant	"primary" | "default" | "filled" | "text"	"default"	样式变体
color	"default" | "primary" | "danger" | "info" | "success" | "warning"	"default"	颜色主题
size	"sm" | "md" | "lg"	"md"	对话框尺寸
children	ReactNode	-	子组件

AlertDialogContent#

属性	类型	默认值	说明
showClose	boolean	true	是否显示关闭按钮
size	"sm" | "md" | "lg"	"md"	对话框尺寸（覆盖父组件）
closeOnOverlayClick	boolean	true	点击遮罩是否关闭
closeOnEscape	boolean	true	按 ESC 是否关闭
onEscapeKeyDown	(event: KeyboardEvent) => void	-	按下 ESC 键时的回调
onPointerDownOutside	(event: PointerEvent) => void	-	点击对话框外部时的回调

AlertDialogHeader#

布局组件，包含标题和描述的容器。

AlertDialogFooter#

布局组件，包含取消和确认按钮的容器。

AlertDialogTitle#

对话框标题。

AlertDialogDescription#

对话框描述文字。

AlertDialogAction#

确认按钮，点击后自动关闭对话框。颜色继承自 AlertDialog 的 color 属性。

AlertDialogCancel#

取消按钮，点击后自动关闭对话框。样式根据 AlertDialog 的 variant 自动适配。