---
title: Message 全局提示
order: 15
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## TODO

message 提示的内容，表示动作已经发生，`撤销` 的意义是什么？

## 使用

全局展示操作反馈信息。可提供成功、警告和错误等反馈信息。
顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示。对于重要操作提供撤销功能。

### 使用原则

- 高度固定，修改文字内容时宽度会自动适配。最小宽度为 160px，超过 160px 时，根据间距自动适配。
- 提示 2 秒后消失；可撤销提示用于重要内容的删除，6 秒内可撤销。

### 基本使用

提供了五种基本提示：`success`、`error`、`info`、`warning`、`loading`。

```jsx
import React from 'react';
import { Button, message } from 'quanta-design';

const success = () => {
  message.success('这是一条成功提示');
};

const error = () => {
  message.error('这是一条失败提示');
};

const warning = () => {
  message.warning('这是一条警告提示');
};

const info = () => {
  message.info('这是一条指南信息');
};

const loading = () => {
  message.loading('全局加载');
};

export default () => (
  <div style={{ display: 'flex' }}>
    <div style={{ flex: '1' }}>
      <Button onClick={success}>Success</Button>
    </div>
    <div style={{ flex: '1' }}>
      <Button onClick={error}>Error</Button>
    </div>
    <div style={{ flex: '1' }}>
      <Button onClick={info}>Info</Button>
    </div>
    <div style={{ flex: '1' }}>
      <Button onClick={warning}>Warning</Button>
    </div>
    <div style={{ flex: '1' }}>
      <Button onClick={loading}>Loading</Button>
    </div>
  </div>
);
```

### Promise 接口

在每个 message 将要结束时通过 then 显示新的 message。

```jsx
import React from 'react';
import { Button, message } from 'quanta-design';

const success = () => {
  message
    .loading('内容加载中', 2.5)
    .then(() => message.success('恭喜！加载完成', 2.5));
};

export default () => <Button onClick={success}>Promise</Button>;
```