mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
docs: translate modal (#2634)
This commit is contained in:
Gray Choi
Benjy Cui
parent
be553af441
commit
5c2087311f
@ -1,17 +1,26 @@
|
||||
---
|
||||
order: 1
|
||||
title: 异步关闭
|
||||
title:
|
||||
zh-CN: 异步关闭
|
||||
en-US: Asynchronously close
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
点击确定后异步关闭对话框，例如提交表单。
|
||||
|
||||
## en-US
|
||||
|
||||
Asynchronously close a modal dialog when a user clicked OK button, for example,
|
||||
you can use this pattern when you submit a form.
|
||||
|
||||
````jsx
|
||||
import { Modal, Button } from 'antd';
|
||||
|
||||
const Test = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
ModalText: '对话框的内容',
|
||||
ModalText: 'Content of the modal dialog',
|
||||
visible: false,
|
||||
};
|
||||
},
|
||||
@ -22,7 +31,7 @@ const Test = React.createClass({
|
||||
},
|
||||
handleOk() {
|
||||
this.setState({
|
||||
ModalText: '对话框将在两秒后关闭',
|
||||
ModalText: 'The modal dialog will be closed after two seconds',
|
||||
confirmLoading: true,
|
||||
});
|
||||
setTimeout(() => {
|
||||
@ -33,7 +42,7 @@ const Test = React.createClass({
|
||||
}, 2000);
|
||||
},
|
||||
handleCancel() {
|
||||
console.log('点击了取消');
|
||||
console.log('Clicked cancel button');
|
||||
this.setState({
|
||||
visible: false,
|
||||
});
|
||||
@ -41,8 +50,8 @@ const Test = React.createClass({
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Button type="primary" onClick={this.showModal}>显示对话框</Button>
|
||||
<Modal title="对话框标题"
|
||||
<Button type="primary" onClick={this.showModal}>Open a modal dialog</Button>
|
||||
<Modal title="Title of the modal dialog"
|
||||
visible={this.state.visible}
|
||||
onOk={this.handleOk}
|
||||
confirmLoading={this.state.confirmLoading}
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 0
|
||||
title: 基本
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## en-US
|
||||
|
||||
第一个对话框。
|
||||
|
||||
## zh-CN
|
||||
|
||||
Basic modal dialog.
|
||||
|
||||
````jsx
|
||||
import { Modal, Button } from 'antd';
|
||||
|
||||
@ -18,7 +26,7 @@ const App = React.createClass({
|
||||
});
|
||||
},
|
||||
handleOk() {
|
||||
console.log('点击了确定');
|
||||
console.log('Clicked OK');
|
||||
this.setState({
|
||||
visible: false,
|
||||
});
|
||||
@ -32,13 +40,13 @@ const App = React.createClass({
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Button type="primary" onClick={this.showModal}>显示对话框</Button>
|
||||
<Modal title="第一个 Modal" visible={this.state.visible}
|
||||
<Button type="primary" onClick={this.showModal}>Open a modal dialog</Button>
|
||||
<Modal title="Basic Modal" visible={this.state.visible}
|
||||
onOk={this.handleOk} onCancel={this.handleCancel}
|
||||
>
|
||||
<p>对话框的内容</p>
|
||||
<p>对话框的内容</p>
|
||||
<p>对话框的内容</p>
|
||||
<p>some contents...</p>
|
||||
<p>some contents...</p>
|
||||
<p>some contents...</p>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,18 +1,27 @@
|
||||
---
|
||||
order: 5
|
||||
title: 确认对话框
|
||||
title:
|
||||
zh-CN: 确认对话框
|
||||
en-US: Confirmation modal dialog
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `confirm()` 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭
|
||||
|
||||
## en-US
|
||||
|
||||
To use `confirm()` to popup confirmation modal dialog. Let onCancel/onOk function return a promise object to
|
||||
delay closing the dialog.
|
||||
|
||||
````jsx
|
||||
import { Modal, Button } from 'antd';
|
||||
const confirm = Modal.confirm;
|
||||
|
||||
function showConfirm() {
|
||||
confirm({
|
||||
title: '您是否确认要删除这项内容',
|
||||
content: '点确认 1 秒后关闭',
|
||||
title: 'Are you sure you want to delete this item ?',
|
||||
content: 'When clicked the OK button, this dialog will be closed after 1 second',
|
||||
onOk() {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(resolve, 1000);
|
||||
@ -24,7 +33,7 @@ function showConfirm() {
|
||||
|
||||
ReactDOM.render(
|
||||
<Button onClick={showConfirm}>
|
||||
确认对话框
|
||||
Confirmation modal dialog
|
||||
</Button>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@ -1,20 +1,28 @@
|
||||
---
|
||||
order: 3
|
||||
title: 确认对话框
|
||||
title:
|
||||
zh-CN: 确认对话框
|
||||
en-US: Confirmation modal dialog
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `confirm()` 可以快捷地弹出确认框。
|
||||
|
||||
## en-US
|
||||
|
||||
To use `confirm()` to popup a confirmation modal dialog.
|
||||
|
||||
````jsx
|
||||
import { Modal, Button } from 'antd';
|
||||
const confirm = Modal.confirm;
|
||||
|
||||
function showConfirm() {
|
||||
confirm({
|
||||
title: '您是否确认要删除这项内容',
|
||||
content: '一些解释',
|
||||
title: 'Are you sure you want to delete these items ?',
|
||||
content: 'some descriptions',
|
||||
onOk() {
|
||||
console.log('确定');
|
||||
console.log('OK');
|
||||
},
|
||||
onCancel() {},
|
||||
});
|
||||
@ -22,7 +30,7 @@ function showConfirm() {
|
||||
|
||||
ReactDOM.render(
|
||||
<Button onClick={showConfirm}>
|
||||
确认对话框
|
||||
confirmation modal dialog
|
||||
</Button>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@ -1,10 +1,20 @@
|
||||
---
|
||||
order: 2
|
||||
title: 自定义页脚
|
||||
title:
|
||||
zh-CN: 自定义页脚
|
||||
en-US: Customized footer
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
更复杂的例子，自定义了页脚的按钮，点击提交后进入 loading 状态，完成后关闭。
|
||||
|
||||
## en-US
|
||||
|
||||
A more complex example, as illustrated in this example, we define a customized footer button bar,
|
||||
the dialog will change to loading state after clicking submit button , when the loading is over,
|
||||
the modal dialog will be closed.
|
||||
|
||||
````jsx
|
||||
import { Modal, Button } from 'antd';
|
||||
|
||||
@ -33,23 +43,23 @@ const Test = React.createClass({
|
||||
return (
|
||||
<div>
|
||||
<Button type="primary" onClick={this.showModal}>
|
||||
显示对话框
|
||||
Open modal dialog
|
||||
</Button>
|
||||
<Modal ref="modal"
|
||||
visible={this.state.visible}
|
||||
title="对话框标题" onOk={this.handleOk} onCancel={this.handleCancel}
|
||||
title="Title" onOk={this.handleOk} onCancel={this.handleCancel}
|
||||
footer={[
|
||||
<Button key="back" type="ghost" size="large" onClick={this.handleCancel}>返 回</Button>,
|
||||
<Button key="back" type="ghost" size="large" onClick={this.handleCancel}>Return</Button>,
|
||||
<Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
|
||||
提 交
|
||||
Submit
|
||||
</Button>,
|
||||
]}
|
||||
>
|
||||
<p>对话框的内容</p>
|
||||
<p>对话框的内容</p>
|
||||
<p>对话框的内容</p>
|
||||
<p>对话框的内容</p>
|
||||
<p>对话框的内容</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,20 +1,28 @@
|
||||
---
|
||||
order: 5
|
||||
title: 信息提示
|
||||
title:
|
||||
zh-CN: 信息提示
|
||||
en-US: Infomation modal dialog
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
各种类型的信息提示，只提供一个按钮用于关闭。
|
||||
|
||||
## en-US
|
||||
|
||||
In the various types of informaion modal dialog, only one button to close dialog is provided.
|
||||
|
||||
````jsx
|
||||
import { Modal, Button } from 'antd';
|
||||
|
||||
function info() {
|
||||
Modal.info({
|
||||
title: '这是一条通知信息',
|
||||
title: 'This is a notification message',
|
||||
content: (
|
||||
<div>
|
||||
<p>一些附加信息一些附加信息一些附加信息</p>
|
||||
<p>一些附加信息一些附加信息一些附加信息</p>
|
||||
<p>some messages...some messages...</p>
|
||||
<p>some messages...some messages...</p>
|
||||
</div>
|
||||
),
|
||||
onOk() {},
|
||||
@ -23,29 +31,29 @@ function info() {
|
||||
|
||||
function success() {
|
||||
Modal.success({
|
||||
title: '这是一条通知信息',
|
||||
content: '一些附加信息一些附加信息一些附加信息',
|
||||
title: 'This is a success message',
|
||||
content: 'some messages...some messages...',
|
||||
});
|
||||
}
|
||||
|
||||
function error() {
|
||||
Modal.error({
|
||||
title: '这是一条通知信息',
|
||||
content: '一些附加信息一些附加信息一些附加信息',
|
||||
title: 'This is an error message',
|
||||
content: 'some messages...some messages...',
|
||||
});
|
||||
}
|
||||
|
||||
function warning() {
|
||||
Modal.warning({
|
||||
title: '这是一条警告信息',
|
||||
content: '一些附加信息一些附加信息一些附加信息',
|
||||
title: 'This is a warning messge',
|
||||
content: 'some messages...some messages...',
|
||||
});
|
||||
}
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Button onClick={info}>信息提示</Button>
|
||||
<Button onClick={success}>成功提示</Button>
|
||||
<Button onClick={error}>失败提示</Button>
|
||||
<Button onClick={warning}>警告提示</Button>
|
||||
<Button onClick={info}>Info</Button>
|
||||
<Button onClick={success}>Success</Button>
|
||||
<Button onClick={error}>Error</Button>
|
||||
<Button onClick={warning}>Warning</Button>
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 6
|
||||
title: 国际化
|
||||
title:
|
||||
zh-CN: 国际化
|
||||
en-US: Internationalization
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
设置 `okText` 与 `cancelText` 以自定义按钮文字。
|
||||
|
||||
## en-US
|
||||
|
||||
To customize the text of the buttons, you need to set `okText` and `cancelText` props.
|
||||
|
||||
````jsx
|
||||
import { Modal, Button } from 'antd';
|
||||
|
||||
|
||||
@ -1,23 +1,31 @@
|
||||
---
|
||||
order: 7
|
||||
title: 手动移除
|
||||
title:
|
||||
zh-CN: 手动移除
|
||||
en-US: Manual to destroy
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
手动关闭modal。
|
||||
|
||||
## en-US
|
||||
|
||||
Manually destroying a modal.
|
||||
|
||||
````jsx
|
||||
import { Modal, Button } from 'antd';
|
||||
|
||||
function success() {
|
||||
const modal = Modal.success({
|
||||
title: '这是一条通知信息',
|
||||
content: '一秒后自动移除',
|
||||
title: 'This is a notification message',
|
||||
content: 'This modal will be destroyed after 1 second',
|
||||
});
|
||||
setTimeout(() => modal.destroy(), 1000);
|
||||
}
|
||||
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Button onClick={success}>成功提示</Button>
|
||||
<Button onClick={success}>Success</Button>
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@ -1,10 +1,19 @@
|
||||
---
|
||||
order: 7
|
||||
title: 自定义位置
|
||||
title:
|
||||
zh-CN: 自定义位置
|
||||
en-US: To customize the position of modal
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
`1.0` 之后，Modal 的 `align` 属性被移除，您可以直接使用 `style.top` 或配合其他样式来设置对话框位置。
|
||||
|
||||
## en-US
|
||||
|
||||
After release `1.0`, Modal's `align` prop was removed. You can use `style.top` or other styles to
|
||||
set position of modal dialog.
|
||||
|
||||
````jsx
|
||||
import { Modal, Button } from 'antd';
|
||||
|
||||
@ -24,29 +33,29 @@ const App = React.createClass({
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Button type="primary" onClick={() => this.setModal1Visible(true)}>显示距离顶部 20px 的对话框</Button>
|
||||
<Button type="primary" onClick={() => this.setModal1Visible(true)}>Display a modal dialog at 20px to Top</Button>
|
||||
<Modal
|
||||
title="距离顶部 20px 的对话框"
|
||||
title="20px to Top"
|
||||
style={{ top: 20 }}
|
||||
visible={this.state.modal1Visible}
|
||||
onOk={() => this.setModal1Visible(false)}
|
||||
onCancel={() => this.setModal1Visible(false)}
|
||||
>
|
||||
<p>对话框的内容</p>
|
||||
<p>对话框的内容</p>
|
||||
<p>对话框的内容</p>
|
||||
<p>some contents...</p>
|
||||
<p>some contents...</p>
|
||||
<p>some contents...</p>
|
||||
</Modal>
|
||||
<Button type="primary" onClick={() => this.setModal2Visible(true)}>显示垂直居中的对话框</Button>
|
||||
<Button type="primary" onClick={() => this.setModal2Visible(true)}>Vertically centered modal dialog</Button>
|
||||
<Modal
|
||||
title="垂直居中的对话框"
|
||||
title="Vertically centered modal dialog"
|
||||
wrapClassName="vertical-center-modal"
|
||||
visible={this.state.modal2Visible}
|
||||
onOk={() => this.setModal2Visible(false)}
|
||||
onCancel={() => this.setModal2Visible(false)}
|
||||
>
|
||||
<p>对话框的内容</p>
|
||||
<p>对话框的内容</p>
|
||||
<p>对话框的内容</p>
|
||||
<p>some contents...</p>
|
||||
<p>some contents...</p>
|
||||
<p>some contents...</p>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
@ -57,7 +66,7 @@ ReactDOM.render(<App />, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
/* 使用 css 技巧来动态设置的对话框位置 */
|
||||
/* use css to set position of modal */
|
||||
.vertical-center-modal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
66
components/modal/index.en-US.md
Normal file
66
components/modal/index.en-US.md
Normal file
@ -0,0 +1,66 @@
|
||||
---
|
||||
type: Views
|
||||
category: Components
|
||||
english: Modal
|
||||
---
|
||||
|
||||
Modal dialogs.
|
||||
|
||||
## When to use
|
||||
|
||||
When requiring users to interact with application, but without jumping to a new page to interrupt
|
||||
the user's workflow, you can use `Modal` to create a new floating layer over the currtent page for user
|
||||
getting feedback or information purposes.
|
||||
Additionaly, if you need show a simple confirmation dialog, you can use `ant.Modal.confirm()`,
|
||||
and so on.
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|------------|----------------|------------------|--------------|
|
||||
| visible | Determine whether a modal dialog is visible or not | Boolean | no |
|
||||
| confirmLoading | Determine whether to apply loading visual effect for OK button or not | Boolean | no |
|
||||
| title | The modal dialog's title | React.Element | no |
|
||||
| closable | Determine whether a close (x) button is visible on top right of the modal dialog or not | Boolean | true |
|
||||
| onOk | Specify a function that will be called when a user clicked OK button | function | no |
|
||||
| onCancel | Specify a function that will be called when a user clicked mask, close button on top right or cancel button | function(e) | no |
|
||||
| width | Width of a modal dialog | String or Number | 520 |
|
||||
| footer | Footer content | React.Element | OK and cancel button |
|
||||
| okText | Text of the OK button | String | OK |
|
||||
| cancelText | Text of the Cancel button | String | Cancel |
|
||||
| maskClosable | Determine whether to close the modal dialog when clicked mask of it. | Boolean | true |
|
||||
| style | Style of floating layer, typically used at least for adjusting the position. | Object | - |
|
||||
| wrapClassName | The class name of the container of the modal dialog | String | - |
|
||||
|
||||
### Modal.xxx()
|
||||
|
||||
There are five ways to display the information based on the content's nature:
|
||||
|
||||
- `Modal.info`
|
||||
- `Modal.success`
|
||||
- `Modal.error`
|
||||
- `Modal.warning`
|
||||
- `Modal.confirm`
|
||||
|
||||
The item listd above are all functions, expecting a settings object as parameter.
|
||||
The propeties of the object are follows:
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|------------|----------------|------------------|---------------|
|
||||
| title | Title | React.Element or String | no |
|
||||
| content | Content | React.Element or String | no |
|
||||
| onOk | Specify a function that will be called when a user clicked OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | no |
|
||||
| onCancel | Specify a function that will be called when a user clicked Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | no |
|
||||
| width | Width of dialog | String or Number | 416 |
|
||||
| iconType | Type of Icon component | String | question-circle |
|
||||
| okText | Text of OK button | String | OK |
|
||||
| cancelText | Text of cancel button | String | Cancel |
|
||||
|
||||
<style>
|
||||
.code-box-demo .ant-btn {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user