# Alert 警告提示

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/alert/freepass)
- 平台：PC
- 维护者：屈正巍
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys-2
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Alert]

## 代码演示

### 基础用法

最简单的用法，适用于简短的警告提示;共有四种样式 success、info、warning、error。

```jsx
import { Component } from 'react'
import { constants, Alert } from '@weapp/ui'

const prefixCls = `${constants.uiPcClsPrefix}-demo-alert`

type AlertDemoProps = {}

export default class AlertDemo extends Component<AlertDemoProps> {
  render() {
    return (
      <div className={prefixCls}>
        <Alert
         
          message="Success Text"
          type="success"
        />
        <br />
        <Alert
         
          message="Info Text"
          type="info"
        />
        <br />
        <Alert
         
          message="Warning Text"
          type="warning"
        />
        <br />
        <Alert
         
          message="Error Text"
          type="error"
        />
      </div>
    )
  }
}
```

### 含有辅助性文字介绍

含有辅助性文字介绍的警告提示

```jsx
import { Component } from 'react'
import { constants, Alert } from '@weapp/ui'

const prefixCls = `${constants.uiPcClsPrefix}-demo-alert`

type AlertDemoProps = {}

export default class AlertDemo extends Component<AlertDemoProps> {
  render() {
    return (
      <div className={prefixCls}>
        <Alert
         
          message="Success Text"
          description="Success Description Success Description Success Description"
          type="success"
        />
        <br />
        <Alert
         
          message="Info Text"
          description="Info Description Info Description Info Description Info Description"
          type="info"
        />
        <br />
        <Alert
         
          message="Warning Text"
          description="Warning Description Warning Description Warning Description Warning Description"
          type="warning"
        />
        <br />
        <Alert
         
          message="Error Text"
          description="Error Description Error Description Error Description Error Description"
          type="error"
        />
      </div>
    )
  }
}
```

### 图标样式

图标让信息类型更加醒目

```jsx
import { Component } from 'react'
import { constants, Alert } from '@weapp/ui'

const prefixCls = `${constants.uiPcClsPrefix}-demo-alert`

type AlertDemoProps = {}

export default class AlertDemo extends Component<AlertDemoProps> {
  render() {
    return (
      <div className={prefixCls}>
        <Alert
         
          message="happy LunarKK"
          type="success"
          showIcon
        />
        <br />
        <Alert
         
          message="common LunarKK"
          type="info"
          showIcon
        />
        <br />
        <Alert
         
          message="confused LunarKK"
          type="warning"
          showIcon
          closable
        />
        <br />
        <Alert
         
          message="angry LunarKK"
          type="error"
          showIcon
        />
        <br />
        <Alert
         
          message="happy"
          description="happy LunarKK happy LunarKK happy LunarKK happy LunarKK"
          type="success"
          showIcon
        />
        <br />
        <Alert
         
          message="common LunarKK"
          description="common LunarKK common LunarKK common LunarKK common LunarKK"
          type="info"
          showIcon
        />
        <br />
        <Alert
         
          message="confused LunarKK"
          description="confused LunarKK confused LunarKK confused LunarKK confused LunarKK"
          type="warning"
          showIcon
          closable
        />
        <br />
        <Alert
         
          message="angry LunarKK"
          description="angry LunarKK angry LunarKK angry LunarKK angry LunarKK "
          type="error"
          showIcon
        />
      </div>
    )
  }
}
```

### 可关闭的警告提示

显示关闭按钮，点击可关闭警告提示

```jsx
import { Component } from 'react'
import { constants, Alert } from '@weapp/ui'

const prefixCls = `${constants.uiPcClsPrefix}-demo-alert`

type AlertDemoProps = {}

export default class AlertDemo extends Component<AlertDemoProps> {
  onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    console.log(e, 'I was closed.')
  }
  render() {
    return (
      <div className={prefixCls}>
        <Alert
         
          message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
          type="warning"
          closable
          onClose={this.onClose}
        />
        <br />
        <Alert
         
          message="Error Text"
          description="Error Description Error Description Error Description Error Description Error Description Error Description"
          type="error"
          closable
          onClose={this.onClose}
        />
        <br />
        <Alert
         
          message="Info Text"
          type="info"
          closeText="Close Now"
        />
      </div>
    )
  }
}
```

### 顶部公告

页面顶部通告形式，默认有图标且 type 为 warning

```jsx
import { Component } from 'react'
import { constants, Alert } from '@weapp/ui'

const prefixCls = `${constants.uiPcClsPrefix}-demo-alert`

type AlertDemoProps = {}

export default class AlertDemo extends Component<AlertDemoProps> {
  render() {
    return (
      <div className={prefixCls}>
        <Alert
         
          message="Warning text"
          banner
        />
        <br />
        <Alert
         
          message="Very long warning text warning text text text text text text text"
          banner
          closable
        />
        <br />
        <Alert
         
          showIcon={false}
          message="Warning text without icon"
          banner
        />
        <br />
        <Alert
         
          type="error"
          message="Error text"
          banner
        />
      </div>
    )
  }
}
```

### 自定义图标

制定自己喜欢的图标让信息类型更加醒目

```jsx
import { Component } from 'react'
import { constants, Alert, Icon } from '@weapp/ui'

const prefixCls = `${constants.uiPcClsPrefix}-demo-alert`

type AlertDemoProps = {}

const icon = <Icon name="Icon-smiling-face" size={'s'} />
const icon2 = <Icon name="Icon-Speechless" size={'lg'} />

export default class AlertDemo extends Component<AlertDemoProps> {
  render() {
    return (
      <div className={prefixCls}>
        <Alert
         
          icon={icon}
          message="showIcon = false"
          type="success"
        />
        <br />
        <Alert
         
          icon={icon}
          message="Success Tips"
          type="success"
          showIcon
        />
        <br />
        <Alert
         
          icon={icon}
          message="Informational Notes"
          type="info"
          showIcon
        />
        <br />
        <Alert
         
          icon={icon}
          message="Warning"
          type="warning"
          showIcon
          closable
        />
        <br />
        <Alert
         
          icon={icon}
          message="Error"
          type="error"
          showIcon
        />
        <br />
        <Alert
         
          icon={icon2}
          message="Success Tips"
          description="Detailed description and advices about successful copywriting."
          type="success"
          showIcon
        />
        <br />
        <Alert
         
          icon={icon2}
          message="Informational Notes"
          description="Additional description and informations about copywriting."
          type="info"
          showIcon
        />
        <br />
        <Alert
         
          icon={icon2}
          message="Warning"
          description="This is a warning notice about copywriting."
          type="warning"
          showIcon
          closable
        />
        <br />
        <Alert
         
          icon={icon2}
          message="Error"
          description="This is an error message about copywriting."
          type="error"
          showIcon
        />
      </div>
    )
  }
}
```

### 自定义操作按钮

制定自己喜欢的操作按钮让操作按钮更加多样化

```jsx
import { Component } from 'react'
import { constants, Alert, Button } from '@weapp/ui'

const prefixCls = `${constants.uiPcClsPrefix}-demo-alert`

type AlertDemoProps = {}

export default class AlertDemo extends Component<AlertDemoProps> {
  render() {
    return (
      <div className={prefixCls}>
        <Alert
         
          message="Success Tips"
          type="success"
          showIcon
          action={'SuccessAction'}
          closable
        />
        <br />
        <Alert
         
          message="Error Text"
          showIcon
          description="Error Description Error Description Error Description Error Description"
          type="error"
          action={
            <Button
             
              size="small"
              type={'danger'}
            >
              ErrorAction
            </Button>
          }
        />
        <br />
        <Alert
         
          message="Warning Text"
          type="warning"
          action={
            <Button
             
              size="small"
              type={'warning'}
              radius
            >
              WarningAction
            </Button>
          }
          closable
        />
        <br />
        <Alert
         
          message="Info Text"
          description="Info Description Info Description Info Description Info Description"
          type="info"
          action={
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <Button
               
                size="small"
                type="primary"
                style={{ marginBottom: '2px' }}
              >
                Accept
              </Button>
              <Button size="small">
                Decline
              </Button>
            </div>
          }
          closable
        />
      </div>
    )
  }
}
```

## API

### 参数说明：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| action | 自定义操作按钮 | ReactNode | false |  |
| afterClose | 关闭动画结束后触发的回调函数 | () => void | false |  |
| banner | 是否用作顶部公告 | boolean | false |  |
| closable | 是否可关闭 | boolean | false |  |
| closeText | 自定义关闭按钮 | ReactNode | false |  |
| closeIcon | 自定义关闭图标 | 参考 Icon 组件的 IconNames | false |  |
| description | 警告提示的辅助性文字介绍 | ReactNode | false |  |
| icon | 自定义图标，`showIcon` 为 true 时有效 | ReactNode | false |  |
| message | 警告提示内容 | ReactNode | false |  |
| showIcon | 是否显示辅助图标 | boolean | false | `banner` 模式下默认值为 true |
| type | 指定警告提示的样式 | `success`｜`info`｜`warning`｜`error` | false | `info`，`banner`模式下默认值为`warning` |
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | false |  |
| onMouseEnter | 鼠标移入的回调函数 | (e: MouseEvent) => void | false |  |
| onMouseLeave | 鼠标移出的回调函数 | (e: MouseEvent) => void | false |  |
| onClick | 鼠标点击的回调函数 | (e: MouseEvent) => void | false |  |
| iconName | 自定义图标名称 | 参考 Icon 组件的 IconNames | false |  |
