Alert

何时使用 {#when-to-use}

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

代码演示 {#examples}

<!-- prettier-ignore -->

<code src="./demo/basic.tsx">基本</code> <code src="./demo/style.tsx">四种样式</code> <code src="./demo/closable.tsx">可关闭的警告提示</code> <code src="./demo/description.tsx">含有辅助性文字介绍</code> <code src="./demo/icon.tsx">图标</code> <code src="./demo/banner.tsx" iframe="250">顶部公告</code> <code src="./demo/loop-banner.tsx">轮播的公告</code> <code src="./demo/smooth-closed.tsx">平滑地卸载</code> <code src="./demo/error-boundary.tsx">React 错误处理</code> <code src="./demo/custom-icon.tsx" debug>自定义图标</code> <code src="./demo/action.tsx">操作</code> <code src="./demo/component-token.tsx" debug>组件 Token</code> <code src="./demo/style-class.tsx" version="6.0.0">自定义语义结构的样式和类</code>

API

通用属性参考：通用属性

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

ClosableType

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

Alert.ErrorBoundary

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

Semantic DOM

<code src="./demo/_semantic.tsx" simplify="true"></code>

Design Token

<ComponentTokenTable component="Alert"></ComponentTokenTable>