docs: translate notification (#2731)

This commit is contained in:
Gray Choi 2016-08-17 12:07:02 +09:00 committed by Benjy Cui
parent 36293e2ccb
commit 3e5015e351
6 changed files with 112 additions and 22 deletions

View File

@ -1,21 +1,29 @@
---
order: 0
title: 基本
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法4.5 秒后自动关闭。
## en-US
The simplest usage that close the notification box after 4.5s.
````jsx
import { Button, notification } from 'antd';
const openNotification = function () {
notification.open({
message: '这是标题',
description: '这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案',
message: 'This is the title',
description: 'This is the content of the notification.This is the content of the notification.This is the content of the notification.',
});
};
ReactDOM.render(
<Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
<Button type="primary" onClick={openNotification}>Open the notification box</Button>
, mountNode);
````

View File

@ -1,23 +1,33 @@
---
order: 1
title: 自动关闭的延时
title:
zh-CN: 自动关闭的延时
en-US: Duration after which the notification box is closed
---
## zh-CN
自定义通知框自动关闭的延时,默认`4.5s`,取消自动关闭只要将该值设为 `0` 即可。
## en-US
`Duration` can be used to specify how long the notification stays open. After the duration time elapses,
the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to 0,
the notification box will never close automatically.
````jsx
import { Button, notification } from 'antd';
const openNotification = function () {
const args = {
message: '这是标题',
description: '我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭',
message: 'This is the title',
description: 'I will never close automatically.I will be close automatically.I will never close automatically.',
duration: 0,
};
notification.open(args);
};
ReactDOM.render(
<Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
<Button type="primary" onClick={openNotification}>Open the notification box</Button>
, mountNode);
````

View File

@ -1,31 +1,39 @@
---
order: 4
title: 自定义
title:
zh-CN: 自定义
en-US: Custom clase button and handler
---
## zh-CN
自定义关闭按钮的样式和文字。
## en-US
To customize the style or font of the close button.
````jsx
import { Button, notification } from 'antd';
const close = function () {
console.log('我被默认的关闭按钮关闭了!');
console.log('Notification was closed. Either the close button was clicked or duration time elapsed.');
};
const openNotification = function () {
const key = `open${Date.now()}`;
const btnClick = function () {
// 隐藏提醒框
// to hide notification box
notification.close(key);
};
const btn = (
<Button type="primary" size="small" onClick={btnClick}>
自定义关闭按钮并触发回调函数
To speicify a function that will be called after clicking the Close button
</Button>
);
notification.open({
message: '这是标题',
description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
message: 'This is the title',
description: 'A function will be be called after the notification is closed(automatically after the "duration" time of manually).',
btn,
key,
onClose: close,
@ -34,7 +42,7 @@ const openNotification = function () {
ReactDOM.render(
<div>
<Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
<Button type="primary" onClick={openNotification}>Open the notification box</Button>
</div>,
mountNode);
````

View File

@ -1,28 +1,36 @@
---
order: 2
title: 带有Icon的通知提醒框
title:
zh-CN: 带有Icon的通知提醒框
en-US: A notification box with a icon
---
## zh-CN
通知提醒框左侧有图标。
## en-US
A notification box with a icon at the left side.
````jsx
import { Button, notification } from 'antd';
const openNotificationWithIcon = function (type) {
return function () {
notification[type]({
message: '这是标题',
description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
message: 'This is the title',
description: 'This is the content of the notification.This is the content of the notification.This is the content of the notification.',
});
};
};
ReactDOM.render(
<div>
<Button onClick={openNotificationWithIcon('success')}>成功</Button>
<Button onClick={openNotificationWithIcon('info')}>消息</Button>
<Button onClick={openNotificationWithIcon('warning')}>警告</Button>
<Button onClick={openNotificationWithIcon('error')}>错误</Button>
<Button onClick={openNotificationWithIcon('success')}>Success</Button>
<Button onClick={openNotificationWithIcon('info')}>Info</Button>
<Button onClick={openNotificationWithIcon('warning')}>Warning</Button>
<Button onClick={openNotificationWithIcon('error')}>Error</Button>
</div>
, mountNode);
````

View File

@ -0,0 +1,56 @@
---
category: Components
type: Views
noinstant: true
english: Notification
---
To display a notification message globally.
## When to use
To display a notification message at the top right of the view port. Typically it can be
used in the following cases:
- A notification with complex content.
- A notification providing a feedback based on the user interaction. Or it may show some details
about upcoming steps the user may have to follow.
- A notification that is pushed by the application.
## API
- `notification.success(config)`
- `notification.error(config)`
- `notification.info(config)`
- `notification.warning(config)`
- `notification.warn(config)`
- `notification.close(key: String)`
- `notification.destroy()`
The properties of config are as follows:
| Property | Description | Type | Default |
|----------- |--------------------------------------------- | ----------- |--------|
| message | The title of notification box (required) | React.Element or String | No |
| description | The content of notification box (required) | React.Element or String | No |
| btn | Custom close button | React.Element | No |
| key | The unique identifer of current notification | String | No |
| onClose | Specify a function that will be called after clicking the default close button | Function | No |
| duration | A notification box is closed after 4.5s by default. When specifying `duration` to null or 0, it will never be closed automatically | Number | 4.5 |
`Notification` also provide a global `config()` method that can be used for specifying the default options. Once this method is used, all the notification boxes
will take into account these globally defined options before displaying.
- `notification.config(options)`
```js
notification.config({
top: 100,
duration: 3,
});
```
| Property | Description | Type | Default |
|------------|--------------------|----------------------------|--------------|
| top | Offset to top of message | Number | 24px |
| duration | A duration to close notification automatically by default (unit: second) | Number | 4.5 |