在页面中提示操作结果或需要关注的信息。
import { Alert } from '@sudden3/leaf-ui'; export function AlertBasic() { return ( <div className="leaf-demo-stack leaf-demo-stack--wide"> <Alert title="项目已保存" type="success" /> <Alert title="有新的版本可用" description="你可以在方便的时候更新。" closable /> <Alert title="请检查当前设置" type="warning" /> <Alert title="保存失败" description="请稍后重试,或联系团队管理员。" type="error" /> </div> ); }
title
ReactNode
description
type
'success' | 'info' | 'warning' | 'error'
'info'
showIcon
boolean
true
closable
false
onClose
() => void
定义组件属性或组装变量时可导入相关类型。
import type { AlertProps, FeedbackType } from '@sudden3/leaf-ui';
成功、普通信息、警告和错误使用不同语义颜色。业务文字由应用提供;关闭按钮名称沿用 ConfigProvider 语言。