Alert 警告提示

用于页面中展示重要的提示信息

导入

import { Alert } from '@xcloud/ui-core'

示例

使用说明

请查看上方的交互式示例,了解组件的各种用法和配置选项。

API

AlertRoot

属性	类型	默认值	必需	描述
size	'small' | 'medium'	'small'	❌	提示框的大小
variant	'filled' | 'stroke' | 'lighter'	'filled'	❌	提示框的样式变体
status	'information' | 'success' | 'warning' | 'error'	'information'	❌	提示框的状态类型
wrapperClassName	string	-	❌	内部包裹器的 CSS 类名
className	string	-	❌	附加的 CSS 类名
children	ReactNode	-	❌	提示框内容

AlertIcon

属性	类型	默认值	必需	描述
size	'small' | 'medium'	-	❌	图标大小（自动从 AlertRoot 继承）
variant	'filled' | 'stroke' | 'lighter'	-	❌	图标样式（自动从 AlertRoot 继承）
status	'information' | 'success' | 'warning' | 'error'	-	❌	图标状态（自动从 AlertRoot 继承）
as	React.ElementType	'div'	❌	渲染的元素类型
className	string	-	❌	附加的 CSS 类名

AlertCloseIcon

属性	类型	默认值	必需	描述
size	'small' | 'medium'	-	❌	关闭图标大小（自动从 AlertRoot 继承）
variant	'filled' | 'stroke' | 'lighter'	-	❌	关闭图标样式（自动从 AlertRoot 继承）
status	'information' | 'success' | 'warning' | 'error'	-	❌	关闭图标状态（自动从 AlertRoot 继承）
as	React.ElementType	RiCloseLine	❌	渲染的元素类型
className	string	-	❌	附加的 CSS 类名

相关资源

• 源代码
• 设计规范