使用import { Alert } from 'antd'; |
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 | 全局配置 |
|---|---|---|---|---|---|
| action | 自定义操作项 | ReactNode | - | × | |
关闭动画结束后触发的回调函数，请使用 closable.afterClose 替换 | () => void | - | × | ||
| banner | 是否用作顶部公告 | boolean | false | × | |
| variant | 警告提示样式变体 | outlined | filled | outlined | 6.4.0 | 6.4.0 |
| classNames | 自定义组件内部各语义化结构的类名。支持对象或函数 | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | 6.0.0 | |
| closable | 可关闭配置 | boolean | ClosableType & React.AriaAttributes | false | 5.15.0 | |
| closeIcon | （仅支持全局配置）自定义关闭图标 | ReactNode | - | × | 5.14.0 |
| description | 警告提示的辅助性文字介绍 | ReactNode | - | × | |
| errorIcon | （仅支持全局配置）自定义错误图标 | ReactNode | - | × | 6.2.0 |
| icon | 自定义图标，showIcon 为 true 时有效 | ReactNode | - | × | |
| infoIcon | （仅支持全局配置）自定义信息图标 | ReactNode | - | × | 6.2.0 |
警告提示内容，请使用 title 替换 | ReactNode | - | × | ||
关闭时触发的回调函数，请使用 closable.onClose 替换 | (e: MouseEvent) => void | - | × | ||
自定义关闭图标，请使用 closable.closeIcon 替代 | ReactNode | - | - | × | |
自定义关闭文案，请使用 closable.closeIcon 替代 | ReactNode | - | - | × | |
| 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 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| afterClose | 关闭动画结束后触发的回调函数 | function | - | - |
| closeIcon | 自定义关闭图标 | ReactNode | - | - |
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} | |
自定义错误标题，如果未指定会展示原生报错信息，请使用 title 替换 | ReactNode | {{ error }} | ||
| title | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| defaultPadding | 默认内间距 | Padding<string | number> | undefined | 8px 12px |
| withDescriptionIconSize | 带有描述时的图标尺寸 | string | number | 24 |
| withDescriptionPadding | 带有描述的内间距 | Padding<string | number> | undefined | 20px 24px |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| colorError | 用于表示操作失败的 Token 序列，如失败按钮、错误状态提示（Result）组件等。 | string | #ff4d4f |
| colorErrorBg | 错误色的浅色背景颜色 | string | #fff2f0 |
| colorErrorBorder | 错误色的描边色 | string | #ffccc7 |
| colorIcon | 控制弱操作图标的颜色，例如 allowClear 或 Alert 关闭按钮。 * | string | rgba(0,0,0,0.45) |
| colorIconHover | 控制弱操作图标在悬浮状态下的颜色，例如 allowClear 或 Alert 关闭按钮。 | string | rgba(0,0,0,0.88) |
| colorInfo | 用于表示操作信息的 Token 序列，如 Alert 、Tag、 Progress 等组件都有用到该组梯度变量。 | string | #1677ff |
| colorInfoBg | 信息色的浅色背景颜色。 | string | #e6f4ff |
| colorInfoBorder | 信息色的描边色。 | string | #91caff |
| colorPrimaryBorder | 主色梯度下的描边用色，用在 Slider 等组件的描边上。 | string | #91caff |
| colorSuccess | 用于表示操作成功的 Token 序列，如 Result、Progress 等组件会使用该组梯度变量。 | string | #52c41a |
| colorSuccessBg | 成功色的浅色背景颜色，用于 Tag 和 Alert 的成功态背景色 | string | #f6ffed |
| colorSuccessBorder | 成功色的描边色，用于 Tag 和 Alert 的成功态描边色 | string | #b7eb8f |
| colorText | 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。 | string | rgba(0,0,0,0.88) |
| colorTextHeading | 控制标题字体颜色。 | string | rgba(0,0,0,0.88) |
| colorWarning | 用于表示操作警告的 Token 序列，如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该组梯度变量。 | string | #faad14 |
| colorWarningBg | 警戒色的浅色背景颜色 | string | #fffbe6 |
| colorWarningBorder | 警戒色的描边色 | string | #ffe58f |
| borderRadiusLG | LG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。 | number | 8 |
| fontFamily | Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。 | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。 | number | 14 |
| fontSizeIcon | 控制选择器、级联选择器等中的操作图标字体大小。正常情况下与 fontSizeSM 相同。 | number | 12 |
| fontSizeLG | 大号字体大小 | number | 16 |
| lineHeight | 文本行高 | number | 1.5714285714285714 |
| lineType | 用于控制组件边框、分割线等的样式，默认是实线 | string | solid |
| lineWidth | 用于控制组件边框、分割线等的宽度 | number | 1 |
| lineWidthFocus | 控制线条的宽度，当组件处于聚焦态时。 | number | 3 |
| marginSM | 控制元素外边距，中小尺寸。 | number | 12 |
| marginXS | 控制元素外边距，小尺寸。 | number | 8 |
| motionDurationMid | 动效播放速度，中速。用于中型元素动画交互 | string | 0.2s |
| motionDurationSlow | 动效播放速度，慢速。用于大型元素如面板动画交互 | string | 0.3s |
| motionEaseInOutCirc | 预设动效曲率 | string |
click the close button to see the effect