ant-design/components/message/index.en-US.md

73 lines
2.4 KiB
Markdown
Raw Normal View History

2016-07-04 10:44:55 +08:00
---
category: Components
type: Feedback
2016-07-04 10:44:55 +08:00
noinstant: true
2016-09-21 11:28:38 +08:00
title: Message
2016-07-04 10:44:55 +08:00
---
Display global messages as feedback in response to user operations.
2016-07-04 10:44:55 +08:00
## When To Use
- To provide feedback such as success, warning, error etc.
2016-07-04 10:44:55 +08:00
- A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weighted prompt.
## API
2017-03-19 14:16:39 +08:00
This components provides some static methods, with usage and arguments as following:
- `message.success(content, [duration], onClose)`
- `message.error(content, [duration], onClose)`
- `message.info(content, [duration], onClose)`
- `message.warning(content, [duration], onClose)`
- `message.warn(content, [duration], onClose)` // alias of warning
- `message.loading(content, [duration], onClose)`
2016-07-04 10:44:55 +08:00
2017-10-25 10:25:44 +08:00
| Argument | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| content | content of the message | string\|ReactNode | - |
| duration | time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 1.5 |
2017-10-25 10:25:44 +08:00
| onClose | Specify a function that will be called when the message is closed | Function | - |
2016-07-04 10:44:55 +08:00
2018-09-02 17:25:16 +08:00
`afterClose` can be called in thenable interface:
2018-06-24 17:09:18 +08:00
- `message[level](content, [duration]).then(afterClose)`
- `message[level](content, [duration], onClose).then(afterClose)`
where `level` refers one static methods of `message`. The result of `then` method will be a Promise.
2018-09-02 17:25:16 +08:00
- `message.open(config)`
The properties of config are as follows:
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| content | content of the message | ReactNode | - |
| duration | time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 3 |
| onClose | Specify a function that will be called when the message is closed | function | - |
| icon | Customized Icon | ReactNode | - |
### Global static methods
Methods for global configuration and destruction are also provided:
- `message.config(options)`
- `message.destroy()`
#### message.config
2016-07-04 10:44:55 +08:00
```js
message.config({
top: 100,
duration: 2,
maxCount: 3,
2016-07-04 10:44:55 +08:00
});
```
2017-10-25 10:25:44 +08:00
| Argument | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| duration | time before auto-dismiss, in seconds | number | 1.5 |
| getContainer | Return the mount node for Message | () => HTMLElement | () => document.body |
| maxCount | max message show, drop oldest if exceed limit | number | - |
2018-06-24 17:09:18 +08:00
| top | distance from top | number | 24 |