mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
docs: translate notification (#2731)
This commit is contained in:
parent
36293e2ccb
commit
3e5015e351
@ -1,21 +1,29 @@
|
|||||||
---
|
---
|
||||||
order: 0
|
order: 0
|
||||||
title: 基本
|
title:
|
||||||
|
zh-CN: 基本
|
||||||
|
en-US: Basic
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## zh-CN
|
||||||
|
|
||||||
最简单的用法,4.5 秒后自动关闭。
|
最简单的用法,4.5 秒后自动关闭。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
The simplest usage that close the notification box after 4.5s.
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Button, notification } from 'antd';
|
import { Button, notification } from 'antd';
|
||||||
|
|
||||||
const openNotification = function () {
|
const openNotification = function () {
|
||||||
notification.open({
|
notification.open({
|
||||||
message: '这是标题',
|
message: 'This is the title',
|
||||||
description: '这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案',
|
description: 'This is the content of the notification.This is the content of the notification.This is the content of the notification.',
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
|
<Button type="primary" onClick={openNotification}>Open the notification box</Button>
|
||||||
, mountNode);
|
, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -1,23 +1,33 @@
|
|||||||
---
|
---
|
||||||
order: 1
|
order: 1
|
||||||
title: 自动关闭的延时
|
title:
|
||||||
|
zh-CN: 自动关闭的延时
|
||||||
|
en-US: Duration after which the notification box is closed
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## zh-CN
|
||||||
|
|
||||||
自定义通知框自动关闭的延时,默认`4.5s`,取消自动关闭只要将该值设为 `0` 即可。
|
自定义通知框自动关闭的延时,默认`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
|
````jsx
|
||||||
import { Button, notification } from 'antd';
|
import { Button, notification } from 'antd';
|
||||||
|
|
||||||
const openNotification = function () {
|
const openNotification = function () {
|
||||||
const args = {
|
const args = {
|
||||||
message: '这是标题',
|
message: 'This is the title',
|
||||||
description: '我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭',
|
description: 'I will never close automatically.I will be close automatically.I will never close automatically.',
|
||||||
duration: 0,
|
duration: 0,
|
||||||
};
|
};
|
||||||
notification.open(args);
|
notification.open(args);
|
||||||
};
|
};
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
|
<Button type="primary" onClick={openNotification}>Open the notification box</Button>
|
||||||
, mountNode);
|
, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -1,31 +1,39 @@
|
|||||||
---
|
---
|
||||||
order: 4
|
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
|
````jsx
|
||||||
import { Button, notification } from 'antd';
|
import { Button, notification } from 'antd';
|
||||||
|
|
||||||
const close = function () {
|
const close = function () {
|
||||||
console.log('我被默认的关闭按钮关闭了!');
|
console.log('Notification was closed. Either the close button was clicked or duration time elapsed.');
|
||||||
};
|
};
|
||||||
|
|
||||||
const openNotification = function () {
|
const openNotification = function () {
|
||||||
const key = `open${Date.now()}`;
|
const key = `open${Date.now()}`;
|
||||||
const btnClick = function () {
|
const btnClick = function () {
|
||||||
// 隐藏提醒框
|
// to hide notification box
|
||||||
notification.close(key);
|
notification.close(key);
|
||||||
};
|
};
|
||||||
const btn = (
|
const btn = (
|
||||||
<Button type="primary" size="small" onClick={btnClick}>
|
<Button type="primary" size="small" onClick={btnClick}>
|
||||||
自定义关闭按钮并触发回调函数
|
To speicify a function that will be called after clicking the Close button
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
notification.open({
|
notification.open({
|
||||||
message: '这是标题',
|
message: 'This is the title',
|
||||||
description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
|
description: 'A function will be be called after the notification is closed(automatically after the "duration" time of manually).',
|
||||||
btn,
|
btn,
|
||||||
key,
|
key,
|
||||||
onClose: close,
|
onClose: close,
|
||||||
@ -34,7 +42,7 @@ const openNotification = function () {
|
|||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<div>
|
<div>
|
||||||
<Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
|
<Button type="primary" onClick={openNotification}>Open the notification box</Button>
|
||||||
</div>,
|
</div>,
|
||||||
mountNode);
|
mountNode);
|
||||||
````
|
````
|
||||||
|
@ -1,28 +1,36 @@
|
|||||||
---
|
---
|
||||||
order: 2
|
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
|
````jsx
|
||||||
import { Button, notification } from 'antd';
|
import { Button, notification } from 'antd';
|
||||||
|
|
||||||
const openNotificationWithIcon = function (type) {
|
const openNotificationWithIcon = function (type) {
|
||||||
return function () {
|
return function () {
|
||||||
notification[type]({
|
notification[type]({
|
||||||
message: '这是标题',
|
message: 'This is the title',
|
||||||
description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
|
description: 'This is the content of the notification.This is the content of the notification.This is the content of the notification.',
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<div>
|
<div>
|
||||||
<Button onClick={openNotificationWithIcon('success')}>成功</Button>
|
<Button onClick={openNotificationWithIcon('success')}>Success</Button>
|
||||||
<Button onClick={openNotificationWithIcon('info')}>消息</Button>
|
<Button onClick={openNotificationWithIcon('info')}>Info</Button>
|
||||||
<Button onClick={openNotificationWithIcon('warning')}>警告</Button>
|
<Button onClick={openNotificationWithIcon('warning')}>Warning</Button>
|
||||||
<Button onClick={openNotificationWithIcon('error')}>错误</Button>
|
<Button onClick={openNotificationWithIcon('error')}>Error</Button>
|
||||||
</div>
|
</div>
|
||||||
, mountNode);
|
, mountNode);
|
||||||
````
|
````
|
||||||
|
56
components/notification/index.en-US.md
Normal file
56
components/notification/index.en-US.md
Normal 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 |
|
Loading…
Reference in New Issue
Block a user