# 警告提示 Alert

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

向用户显示警告的信息时，通过警告提示，展现需要关注的信息。

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基本用法**：警告提示，展现需要关注的信息，适用于简短的警告提示。
- **不同类型**：警告提示的类型有 `info`, `success`, `warning`, `error` 四种。
- **可关闭**：指定 `closable = true`，可开启关闭按钮。
- **自定义关闭元素**：指定 `closeElement`，自定义关闭元素。`closeElement` 可以接收 `onClick`，并且自带 `close` 参数，调用 `close()` 可以关闭。
- **含有标题**：通过设置 `title` 可以给添加标题，将 `content` 变为辅助性介绍文字。
- **不含图标**：通过指定 `showIcon=false` 来不显示图标。
- **顶部公告**：设置 `banner = true`，可以当作顶部公告使用。
- **操作项**：通过 `action` 可以自定义右上角操作项。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### Alert

|参数名|描述|类型|默认值|
|---|---|---|---|
|banner|是否用作顶部公告|boolean |`-`|
|closable|是否可关闭|boolean |`-`|
|showIcon|是否显示图标|boolean |`true`|
|type|警告的类型|'info' \| 'success' \| 'warning' \| 'error' |`info`|
|action|自定义操作项|ReactNode |`-`|
|closeElement|自定义关闭按钮|ReactNode |`-`|
|content|内容|ReactNode |`-`|
|icon|可以指定自定义图标，`showIcon` 为 `true` 时生效。|ReactNode |`-`|
|title|标题|ReactNode |`-`|
|className|节点类名|string \| string[] |`-`|
|style|节点样式|CSSProperties |`-`|
|afterClose|关闭动画结束后执行的回调|() => void |`-`|
|onClose|关闭的回调|(e) => void |`-`|

---

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