---
title: Alert 警告提示 (done)
order: 11
group: 
  path: /components
nav: 
  title: 组件
  path: /components
---

## 使用
Alert提示，展现需要关注的信息。非浮层的静态展现形式，始终展现，不会自动消失。

### 使用原则
+ 无标题提示：默认无关闭图标；非常驻提示，可以增加关闭图标；一行时可增加操作按钮在内容后方，多行时按钮位置根据情况调整。
+ 有标题提示：默认无关闭图标；非常驻提示，可以增加关闭图标。

### 基本使用
有四种基本样式：`success`、`error`、`info`、`warning`。

```jsx
import React from 'react';
import { Alert, Form } from 'baas-ui';

const labelCol = { span: 3 };
const wrapperCol = { span: 21 };

export default () => (
  <Form labelCol={labelCol} wrapperCol={wrapperCol} labelAlign="left">
    <Form.Item label="success">
      <Alert type="success" message="这是一个成功提示文案" />
    </Form.Item>
    <Form.Item label="error">
      <Alert type="error" message="这是一个失败提示文案" />
    </Form.Item>
    <Form.Item label="info">
      <Alert type="info" message="这是一个温馨提示的文案" />
    </Form.Item>
    <Form.Item label="warning">
      <Alert type="warning" message="这是一个警告提示文案" />
    </Form.Item>
  </Form>
);

```

### 加上图标
```jsx
import React from 'react';
import { Alert, Form } from 'baas-ui';

const labelCol = { span: 3 };
const wrapperCol = { span: 21 };

export default () => (
  <Form labelCol={labelCol} wrapperCol={wrapperCol} labelAlign="left">
    <Form.Item label="success">
      <Alert type="success" message="这是一个成功提示文案" showIcon />
    </Form.Item>
    <Form.Item label="error">
      <Alert type="error" message="这是一个失败提示文案" showIcon />
    </Form.Item>
    <Form.Item label="info">
      <Alert type="info" message="这是一个温馨提示的文案" showIcon />
    </Form.Item>
    <Form.Item label="warning">
      <Alert type="warning" message="这是一个警告提示文案" showIcon />
    </Form.Item>
  </Form>
);

```

### 可关闭
```jsx
import React from 'react';
import { Alert, Form } from 'baas-ui';

const labelCol = { span: 3 };
const wrapperCol = { span: 21 };

export default () => (
  <Form labelCol={labelCol} wrapperCol={wrapperCol} labelAlign="left">
    <Form.Item label="success">
      <Alert type="success" message="这是一个成功提示文案" showIcon closable />
    </Form.Item>
    <Form.Item label="error">
      <Alert type="error" message="这是一个失败提示文案" showIcon closable />
    </Form.Item>
    <Form.Item label="info">
      <Alert type="info" message="这是一个温馨提示的文案" showIcon closable />
    </Form.Item>
    <Form.Item label="warning">
      <Alert type="warning" message="这是一个警告提示文案" showIcon closable />
    </Form.Item>
  </Form>
);

```

### 带标题
```jsx
import React from 'react';
import { Alert, Form } from 'baas-ui';

const labelCol = { span: 3 };
const wrapperCol = { span: 21 };

export default () => (
  <Form labelCol={labelCol} wrapperCol={wrapperCol} labelAlign="left">
    <Form.Item label="success">
      <Alert 
        type="success"
        message="这是一个成功提示文案标题"
        description="这是一个成功提示文案描述"
        showIcon
      />
    </Form.Item>
    <Form.Item label="error">
      <Alert 
        type="error"
        message="这是一个失败提示文案标题"
        description="这是一个失败提示文案描述"
        showIcon
      />
    </Form.Item>
    <Form.Item label="info">
      <Alert 
        type="info"
        message="这是一个温馨提示的文案标题"
        description="这是一个温馨提示的文案描述"
        showIcon
        closable
      />
    </Form.Item>
    <Form.Item label="warning">
      <Alert 
        type="warning"
        message="这是一个警告提示文案标题"
        description="这是一个警告提示文案描述"
        showIcon
      />
    </Form.Item>
  </Form>
);

```

## API

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - |
| banner | 是否用作顶部公告 | boolean | false |
| closable | 默认不显示关闭按钮 | boolean | 无 |
| closeText | 自定义关闭按钮 | string\|ReactNode | 无 |
| description | 警告提示的辅助性文字介绍 | string\|ReactNode | 无 |
| icon | 自定义图标，`showIcon` 为 `true` 时有效 | ReactNode | - |
| message | 警告提示内容 | string\|ReactNode | 无 |
| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | 无 |

### Alert.ErrorBoundary

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