使用import { Alert } from "antd"; |
最简单的用法，适用于简短的警告提示。
显示关闭按钮，点击可关闭警告提示。
可口的图标让信息类型更加醒目。
配合 react-text-loop-next 或 react-fast-marquee 实现消息轮播通知栏。
友好的 React 错误处理 包裹组件。
共有四种样式 success、info、warning、error。
含有辅助性文字介绍的警告提示。
页面顶部通告形式，默认有图标且 type 为 'warning'。
click the close button to see the effect
平滑、自然的卸载提示。
可以在右上角自定义操作项。
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| action | 自定义操作项 | ReactNode | - | 4.9.0 |
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | |
| banner | 是否用作顶部公告 | boolean | false | |
| closable | 可关闭配置，>=5.15.0: 支持 aria-* | boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes) | false | |
| description | 警告提示的辅助性文字介绍 | ReactNode | - | |
| icon | 自定义图标，showIcon 为 true 时有效 | ReactNode | - | |
| message | 警告提示内容 | ReactNode | - | |
| showIcon | 是否显示辅助图标 | boolean | false，banner 模式下默认值为 true | |
| type | 指定警告提示的样式，有四种选择 success、info、warning、error | string | info，banner 模式下默认值为 warning | |
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} | |
| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| defaultPadding | 默认内间距 | undefined | Padding<string | number> | 8px 12px |
| withDescriptionIconSize | 带有描述时的图标尺寸 | number | 24 |
| withDescriptionPadding | 带有描述的内间距 | undefined | Padding<string | number> | 20px 24px |
