# 警告提示

- 页面: https://jiguang132.com/zh/resources/ant-design/docs/alert
- 资源: Ant Design (https://jiguang132.com/zh/resources/ant-design.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design/docs.md

警告提示，展现需要关注的信息。


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

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

## 代码演示 {#examples}


- 基本 · `basic`
- 四种样式 · `style`
- 无边框 · `filled`
- 可关闭的警告提示 · `closable`
- 含有辅助性文字介绍 · `description`
- 图标 · `icon`
- 顶部公告 · `banner`
- 轮播的公告 · `loop-banner`
- 平滑地卸载 · `smooth-closed`
- React 错误处理 · `error-boundary`

- 操作 · `action`
- 自定义标题对齐 · `custom-title-alignment`

- 自定义语义结构的样式和类 · `style-class`

## API

通用属性参考：[通用属性](#jguang-common-props)

| 参数 | 说明 | 类型 | 默认值 | 版本 | [全局配置](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| action | 自定义操作项 | ReactNode | - |  | × |
| ~~afterClose~~ | 关闭动画结束后触发的回调函数，请使用 `closable.afterClose` 替换 | () => void | - |  | × |
| banner | 是否用作顶部公告 | boolean | false |  | × |
| variant | 警告提示样式变体 | `outlined` \| `filled` | `outlined` | 6.4.0 | 6.4.0 |
| classNames | 自定义组件内部各语义化结构的类名。支持对象或函数 | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props }) => Record<[SemanticDOM](#semantic-dom), string> | - |  | 6.0.0 |
| closable | 可关闭配置 | boolean \| [ClosableType](#closabletype) & React.AriaAttributes | `false` |  | `closable.closeIcon`、`closable.aria-*`：5.15.0 |
| closeIcon | （仅支持全局配置）自定义关闭图标 | ReactNode | - | × | 5.14.0 |
| description | 警告提示的辅助性文字介绍 | ReactNode | - |  | × |
| errorIcon | （仅支持全局配置）自定义错误图标 | ReactNode | - | × | 6.2.0 |
| icon | 自定义图标，`showIcon` 为 true 时有效 | ReactNode | - |  | × |
| infoIcon | （仅支持全局配置）自定义信息图标 | ReactNode | - | × | 6.2.0 |
| ~~message~~ | 警告提示内容，请使用 `title` 替换 | ReactNode | - |  | × |
| ~~onClose~~ | 关闭时触发的回调函数，请使用 `closable.onClose` 替换 | (e: MouseEvent) => void | - |  | × |
| ~~closeIcon~~ | 自定义关闭图标，请使用 `closable.closeIcon` 替代 | ReactNode | - | - | × |
| ~~closeText~~ | 自定义关闭文案，请使用 `closable.closeIcon` 替代 | ReactNode | - | - | × |
| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |  | × |
| styles | 自定义组件内部各语义化结构的内联样式。支持对象或函数 | Record<[SemanticDOM](#semantic-dom), CSSProperties> \| (info: { props }) => Record<[SemanticDOM](#semantic-dom), 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 |

### ClosableType

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

### Alert.ErrorBoundary

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

## Semantic DOM

| 语义节点 | 原生说明 | 版本 |
| --- | --- | --- |
| `root` | 根元素，包含边框、背景色、内边距、圆角、位置布局等警告提示框的基础样式 | 6.0.0 |
| `icon` | 图标元素，包含图标的颜色、行高、外边距等样式，支持不同类型的状态图标 | 6.0.0 |
| `section` | 内容元素，采用 flex 布局控制内容区域的排版和最小宽度 | 6.0.0 |
| `title` | 标题元素，包含标题文字的颜色、字体等样式 | 6.0.0 |
| `description` | 描述元素，包含描述文字的字体大小、行高等排版样式 | 6.0.0 |
| `actions` | 操作组元素，包含操作按钮的布局和间距样式 | 6.0.0 |
| `close` | 关闭按钮元素，包含按钮的基础样式 | 6.1.0 |

语义说明来源: `vendor/components/alert/demo/_semantic.tsx`

## Design Token

类型、继承关系和原生令牌声明保持固定源码原文；默认值由原生主题计算，并可能受 ConfigProvider 覆盖。本表不伪造静态默认值。

| 令牌 | 类型 | 原生说明 |
| --- | --- | --- |
| `borderRadius` | `CSSProperties['borderRadius']` | 组件圆角 |
| `defaultPadding` | `CSSProperties['padding']` | 默认内间距 |
| `withDescriptionPadding` | `CSSProperties['padding']` | 带有描述的内间距 |
| `withDescriptionIconSize` | `number \| string` | 带有描述时的图标尺寸 |

声明来源: `vendor/components/alert/style/index.ts`

```ts
import type { CSSProperties } from 'react';

import type { CSSObject } from '@ant-design/cssinjs';

import { unit } from '@ant-design/cssinjs';

import { genFocusStyle, resetComponent } from '../../style';

import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks } from '../../theme/internal';

export interface ComponentToken {
  // Component token here
  /**
   * @desc 组件圆角
   * @descEN Border radius of alert
   * @since 6.6.0
   */
  borderRadius: CSSProperties['borderRadius'];
  /**
   * @desc 默认内间距
   * @descEN Default padding
   */
  defaultPadding: CSSProperties['padding'];
  /**
   * @desc 带有描述的内间距
   * @descEN Padding with description
   */
  withDescriptionPadding: CSSProperties['padding'];
  /**
   * @desc 带有描述时的图标尺寸
   * @descEN Icon size with description
   */
  withDescriptionIconSize: number | string;
}

type AlertToken = FullToken<'Alert'> & {
  // Custom token here
};
```


## 原生通用属性 {#jguang-common-props}


> Tips: 以下通用属性适用于 antd 大部分组件，不支持的组件会单独说明。

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| style | 自定义样式 | CSSProperties | - |
| className | 自定义类名 | string | - |
| rootClassName | 添加在组件最外层的 className | string | - |
| autoFocus | 自动获取焦点，仅对表单类、链接、交互容器等可聚焦元素生效 | boolean | false |


## 安装并复现示例

```bash
npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23
```

使用 ConfigProvider 和原生 App，并单独配置 dayjs 语言。每个示例在查看代码中列出完整源码文件和额外固定依赖。示例名称用于选择演示，不是组件通用属性。主题、语言与 SSR 初始化见资源安装指南。

## 原生类型参考

源码查看器包含未修改的原生实现和以下声明文件，继承类型仍位于原生包中。代码中的英文注释保留为源码参考。

- `vendor/components/alert/Alert.tsx`
- `vendor/components/alert/ErrorBoundary.tsx`
- `vendor/components/alert/index.tsx`
- `vendor/components/alert/style/index.ts`

## 来源与许可

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

保留原生中英文正文与可执行示例；官网专用的嵌入章节和令牌表格在本地展开。Ant Design 使用 MIT 许可，另列依赖的许可证也需保留。上传预览禁止向外发起请求，不提供后端服务。

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt