## 简介

信息提示包含两种形式，即【信息提示条 Message Strip】与 【全局提示 Toast】。
【信息提示条 Message Strip】常用于承载页面中的引导、提示、警示等信息的展示，通过不同的语义色标示不同类型的提示信息。

【全局提示 Toast】常用于提供成功、错误、运行中等状态信息的提示，显示后会自动消失，属于不会阻断用户操作的轻量级反馈提示。

## 示例

### 基础形态

```tsx
import React from 'react';
import { Message } from '@alicloud/console-components';

export default () => {
  return (
    <Message type="notice">运营类信息或提示类信息</Message>
  );
};

export const meta = {
  title: '默认',
  describe: '',
};

```

### 语义

```tsx
import React from 'react';
import { Message, Grid } from '@alicloud/console-components';

const { Row, Col } = Grid;

export default () => {
  return (
    <Row gutter={8} wrap>
      <Col span={12} >
        <br />
        <h5>无语义</h5>
        <Message type="help">描述文案或其他内容类信息</Message>
      </Col>
      <Col span={12}>
        <br />
        <h5>高亮</h5>
        <Message type="notice">运营类信息或提示类信息</Message>
      </Col>
      <Col span={12}>
        <br />
        <h5>成功</h5>
        <Message type="success">信息成功提示类或完成结果提醒</Message>
      </Col>
      <Col span={12}>
        <br />
        <h5>中危</h5>
        <Message type="warning">轻量警示信息或重要提示信息</Message>
      </Col>
      <Col span={12}>
        <br />
        <h5>高危</h5>
        <Message type="error">
          重量级警示、提示、报错或无法回退的操作提示
        </Message>
      </Col>
    </Row>
  );
};

export const meta = {
  title: '',
  describe: '以默认信息条状态为例',
};

```

### 全局提示 Toast

```tsx
import React from 'react';
import { Button, Message, Grid } from '@alicloud/console-components';

const { Row, Col } = Grid;

const showNotice = () =>
  Message.notice({
    content: '这是一条询问消息，>=3s后主动消失',
    duration: 3000,
  });

const showSuccess = () =>
  Message.success({
    content: '这是一条询问消息，>=3s后主动消失',
    duration: 3000,
  });

const showWarning = () =>
  Message.warning({
    content: '这是一条询问消息，>=3s后主动消失',
    duration: 3000,
  });

const showError = () =>
  Message.error({
    content: '这是一条询问消息，>=3s后主动消失',
    duration: 3000,
  });

const showHelp = () =>
  Message.help({ content: '这是一条询问消息，>=3s后主动消失', duration: 3000 });

const showLoading = () =>
  Message.loading({
    content: '这是一条询问消息，>=3s后主动消失',
    duration: 3000,
  });

export default () => {
  return (
    <Row>
      <Col>
        <Button onClick={showSuccess}>Message.success</Button>
      </Col>
      <Col>
        <Button onClick={showWarning}>Message.warning</Button>
      </Col>
      <Col>
        <Button onClick={showError}>Message.error</Button>
      </Col>
      <Col>
        <Button onClick={showNotice}>Message.notice</Button>
      </Col>
      <Col>
        <Button onClick={showHelp}>Message.help</Button>
      </Col>
      <Col>
        <Button onClick={showLoading}>Message.loading</Button>
      </Col>
    </Row>
  );
};

export const meta = {
  title: '',
  describe: '',
};

```

## API

### Message

| 参数           | 说明                                                        | 类型                                                                 | 默认值      | 是否必填 |
| -------------- | ----------------------------------------------------------- | -------------------------------------------------------------------- | ----------- | -------- |
| type           | 反馈类型                                                    | 'success' | 'warning' | 'error' | 'notice' | 'help' | 'loading' | 'success'   |          |
| shape          | 反馈外观                                                    | 'inline' | 'addon' | 'toast'                                       | 'inline'    |          |
| size           | 反馈大小                                                    | 'medium' | 'large'                                                  | 'medium'    |          |
| title          | 标题                                                        | React.ReactNode                                                      | -           |          |
| children       | 内容，非函数式调用下使用                                    | React.ReactNode                                                      | -           |          |
| defaultVisible | 默认是否显示                                                | boolean                                                              | false       |          |
| visible        | 当前是否显示                                                | boolean                                                              | -           |          |
| iconType       | 显示的图标类型，会覆盖内部设置的IconType，传false不显示图标 | string | false                                                      | -           |          |
| closeable      | 显示关闭按钮                                                | boolean                                                              | false       |          |
| onClose        | 关闭按钮的回调                                              | () => void                                                           | () => {} |          |
| afterClose     | 关闭之后调用的函数                                          | () => void                                                           | () => {} |          |
| animation      | 是否开启展开收起动画                                        | boolean                                                              | true        |          |

### Message.show

Message.show(props) 提供一个单例的调用方式，配置参数如下（继承 Overlay 的配置）：

```js
Message.show({
    type: 'error',
    title: '错误',
    content: '请联系相关人员反馈！',
    hasMask: true,
});
```

| 参数         | 说明                                      | 类型                                                                 | 默认值      | 是否必填 |
| ------------ | ----------------------------------------- | -------------------------------------------------------------------- | ----------- | -------- |
| type         | 反馈类型                                  | 'success' | 'warning' | 'error' | 'notice' | 'help' | 'loading' | 'success'   |          |
| size         | 反馈大小                                  | 'medium' | 'large'                                                  | 'medium'    |          |
| title        | 标题                                      | React.ReactNode                                                      | -           |          |
| content      | 内容，函数式调用下使用                    | React.ReactNode                                                      | -           |          |
| align        | 弹层对齐方式，详情见 Overlay align        | string | boolean                                                    | 'tc tc'     |          |
| offset       | 弹层相对于参照元素定位的微调              | Array\<number>                                                       | \[0, 0]      |          |
| hasMask      | 是否显示遮罩                              | boolean                                                              | false       |          |
| duration     | 显示持续时间，0表示一直存在，以毫秒为单位 | number                                                               | 3000        |          |
| closeable    | 显示关闭按钮                              | boolean                                                              | false       |          |
| onClose      | 关闭按钮的回调                            | () => void                                                           | () => {} |          |
| afterClose   | 关闭之后调用的函数                        | () => void                                                           | () => {} |          |
| animation    | 是否开启展开收起动画                      | boolean                                                              | true        |          |
| overlayProps | 透传到弹层组件的属性对象                  | OverlayProps                                                         | -           |          |

## 更多示例

```tsx
```

```tsx
```

```tsx
```

```tsx
```