警告提示 Alert - Ant Design

何时使用

当某个页面需要向用户显示警告的信息时。
非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

代码演示

API

通用属性参考：通用属性

参数	说明	类型	默认值	版本	全局配置
action	自定义操作项	ReactNode	-		×
~~afterClose~~	关闭动画结束后触发的回调函数，请使用 `closable.afterClose` 替换	() => void	-		×
banner	是否用作顶部公告	boolean	false		×
classNames	自定义组件内部各语义化结构的类名。支持对象或函数	Record<SemanticDOM, string> \| (info: { props }) => Record<SemanticDOM, string>	-		6.0.0
closable	可关闭配置	boolean \| ClosableType & React.AriaAttributes	`false`		✔
closeIcon	（仅支持全局配置）自定义关闭图标	ReactNode	-	×	6.3.0
description	警告提示的辅助性文字介绍	ReactNode	-		×
errorIcon	（仅支持全局配置）自定义错误图标	ReactNode	-	×	6.2.0
icon	自定义图标，`showIcon` 为 true 时有效	ReactNode	-		×
infoIcon	（仅支持全局配置）自定义信息图标	ReactNode	-	×	6.2.0
~~message~~	警告提示内容，请使用 `title` 替换	ReactNode	-		×
~~onClose~~	关闭时触发的回调函数，请使用 `closable.onClose` 替换	(e: MouseEvent) => void	-		×
showIcon	是否显示辅助图标	boolean	false，`banner` 模式下默认值为 true		×
styles	自定义组件内部各语义化结构的内联样式。支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props }) => Record<SemanticDOM, CSSProperties>	-		6.0.0
successIcon	（仅支持全局配置）自定义成功图标	ReactNode	-	×	6.2.0
title	警告提示内容	ReactNode	-		×
type	指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error`	string	`info`，`banner` 模式下默认值为 `warning`		×
warningIcon	（仅支持全局配置）自定义警告图标	ReactNode	-	×	6.2.0

ClosableType

参数	说明	类型	默认值	版本
afterClose	关闭动画结束后触发的回调函数	function	-	-
closeIcon	自定义关闭图标	ReactNode	-	-
onClose	关闭时触发的回调函数	(e: MouseEvent) => void	-	-

Alert.ErrorBoundary

参数	说明	类型	默认值	版本
description	自定义错误内容，如果未指定会展示报错堆栈	ReactNode	{{ error stack }}
~~message~~	自定义错误标题，如果未指定会展示原生报错信息，请使用 `title` 替换	ReactNode	{{ error }}
title	自定义错误标题，如果未指定会展示原生报错信息	ReactNode	{{ error }}

Semantic DOM

Info Text

Info Description Info Description Info Description Info Description

root
6.0.0
根元素，包含边框、背景色、内边距、圆角、位置布局等警告提示框的基础样式
icon
6.0.0
图标元素，包含图标的颜色、行高、外边距等样式，支持不同类型的状态图标
section
6.0.0
内容元素，采用 flex 布局控制内容区域的排版和最小宽度
title
6.0.0
标题元素，包含标题文字的颜色、字体等样式
description
6.0.0
描述元素，包含描述文字的字体大小、行高等排版样式
actions
6.0.0
操作组元素，包含操作按钮的布局和间距样式
close
6.1.0
关闭按钮元素，包含按钮的基础样式

Design Token

组件 Token如何定制？

Token 名称	描述	类型	默认值
defaultPadding	默认内间距	Padding<string \| number> \| undefined	8px 12px
withDescriptionIconSize	带有描述时的图标尺寸	number	24
withDescriptionPadding	带有描述的内间距	Padding<string \| number> \| undefined	20px 24px

全局 Token如何定制？