Mirrors
/
ant-design
mirror of https://github.com/ant-design/ant-design.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

docs: update docs details for Modal, close: #6121

Browse Source
pull/6155/head
Benjy Cui 8 years ago
parent aab3daa1ea
commit 9ce3a1ea35
10 changed files with 71 additions and 53 deletions
Show Stats Download Patch File Download Diff File

15
components/modal/demo/async.md
Unescape Escape View File

@ -19,7 +19,7 @@ import { Modal, Button } from 'antd';
class App extends React.Component {
state = {
ModalText: 'Content of the modal dialog',
ModalText: 'Content of the modal',
visible: false,
}
showModal = () => {
@ -29,7 +29,7 @@ class App extends React.Component {
}
handleOk = () => {
this.setState({
ModalText: 'The modal dialog will be closed after two seconds',
ModalText: 'The modal will be closed after two seconds',
confirmLoading: true,
});
setTimeout(() => {
@ -46,16 +46,17 @@ class App extends React.Component {
});
}
render() {
const { visible, confirmLoading, ModalText } = this.state;
return (
<div>
<Button type="primary" onClick={this.showModal}>Open a modal dialog</Button>
<Modal title="Title of the modal dialog"
visible={this.state.visible}
<Button type="primary" onClick={this.showModal}>Open</Button>
<Modal title="Title"
visible={visible}
onOk={this.handleOk}
confirmLoading={this.state.confirmLoading}
confirmLoading={confirmLoading}
onCancel={this.handleCancel}
>
<p>{this.state.ModalText}</p>
<p>{ModalText}</p>
</Modal>
</div>
);

10
components/modal/demo/basic.md
Unescape Escape View File

@ -11,7 +11,7 @@ title:
## en-US
Basic modal dialog.
Basic modal.
````jsx
import { Modal, Button } from 'antd';
@ -38,16 +38,16 @@ class App extends React.Component {
render() {
return (
<div>
<Button type="primary" onClick={this.showModal}>Open a modal dialog</Button>
<Button type="primary" onClick={this.showModal}>Open</Button>
<Modal
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>some contents...</p>
<p>some contents...</p>
<p>some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
</div>
);

4
components/modal/demo/confirm-promise.md
Unescape Escape View File

@ -20,7 +20,7 @@ const confirm = Modal.confirm;
function showConfirm() {
confirm({
title: 'Want to delete these items?',
title: 'Do you want to delete these items?',
content: 'When clicked the OK button, this dialog will be closed after 1 second',
onOk() {
return new Promise((resolve, reject) => {
@ -33,7 +33,7 @@ function showConfirm() {
ReactDOM.render(
<Button onClick={showConfirm}>
Confirmation modal dialog
Confirm
</Button>
, mountNode);
````

6
components/modal/demo/confirm.md
Unescape Escape View File

@ -19,8 +19,8 @@ const confirm = Modal.confirm;
function showConfirm() {
confirm({
title: 'Want to delete these items?',
content: 'some descriptions',
title: 'Do you Want to delete these items?',
content: 'Some descriptions',
onOk() {
console.log('OK');
},
@ -32,7 +32,7 @@ function showConfirm() {
ReactDOM.render(
<Button onClick={showConfirm}>
confirmation modal dialog
Confirm
</Button>
, mountNode);
````

7
components/modal/demo/footer.md
Unescape Escape View File

@ -42,19 +42,20 @@ class App extends React.Component {
this.setState({ visible: false });
}
render() {
const { visible, loading } = this.state;
return (
<div>
<Button type="primary" onClick={this.showModal}>
Open modal dialog
Open
</Button>
<Modal
visible={this.state.visible}
visible={visible}
title="Title"
onOk={this.handleOk}
onCancel={this.handleCancel}
footer={[
<Button key="back" size="large" onClick={this.handleCancel}>Return</Button>,
<Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
<Button key="submit" type="primary" size="large" loading={loading} onClick={this.handleOk}>
Submit
</Button>,
]}

15
components/modal/demo/info.md
Unescape Escape View File

@ -50,10 +50,13 @@ function warning() {
});
}
ReactDOM.render(<div>
<Button onClick={info}>Info</Button>
<Button onClick={success}>Success</Button>
<Button onClick={error}>Error</Button>
<Button onClick={warning}>Warning</Button>
</div>, mountNode);
ReactDOM.render(
<div>
<Button onClick={info}>Info</Button>
<Button onClick={success}>Success</Button>
<Button onClick={error}>Error</Button>
<Button onClick={warning}>Warning</Button>
</div>,
mountNode
);
````

34
components/modal/demo/locale.md
Unescape Escape View File

@ -23,12 +23,7 @@ class LocalizedModal extends React.Component {
visible: true,
});
}
handleOk = () => {
this.setState({
visible: false,
});
}
handleCancel = () => {
hideModal = () => {
this.setState({
visible: false,
});
@ -36,14 +31,14 @@ class LocalizedModal extends React.Component {
render() {
return (
<div>
<Button type="primary" onClick={this.showModal}>Show Modal</Button>
<Button type="primary" onClick={this.showModal}>Modal</Button>
<Modal
title="Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
okText="OK"
cancelText="Cancel"
onOk={this.hideModal}
onCancel={this.hideModal}
okText="确认"
cancelText="取消"
>
<p>Bla bla ...</p>
<p>Bla bla ...</p>
@ -58,14 +53,17 @@ function confirm() {
Modal.confirm({
title: 'Confirm',
content: 'Bla bla ...',
okText: 'OK',
cancelText: 'Cancel',
okText: '确认',
cancelText: '取消',
});
}
ReactDOM.render(<div>
<LocalizedModal />
<br />
<Button onClick={confirm}>confirm</Button>
</div>, mountNode);
ReactDOM.render(
<div>
<LocalizedModal />
<br />
<Button onClick={confirm}>Confirm</Button>
</div>,
mountNode
);
````

7
components/modal/demo/manual.md
Unescape Escape View File

@ -26,7 +26,8 @@ function success() {
}
ReactDOM.render(<div>
<Button onClick={success}>Success</Button>
</div>, mountNode);
ReactDOM.render(
<Button onClick={success}>Success</Button>,
mountNode
);
````

13
components/modal/index.en-US.md
Unescape Escape View File

@ -11,7 +11,7 @@ Modal dialogs.
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 current page for user
getting feedback or information purposes.
Additionally, if you need show a simple confirmation dialog, you can use `ant.Modal.confirm()`,
Additionally, if you need show a simple confirmation dialog, you can use `antd.Modal.confirm()`,
and so on.
## API
@ -38,11 +38,11 @@ and so on.
> The state of Modal will be preserved at it's component lifecircle.
> If you wish to open it with brand new state everytime, you need to reset state manually. Or simply [give a new key](https://github.com/ant-design/ant-design/issues/4165) to Modal when visible is changed to `true`, React will treat it as a new component.
> ```
> ```jsx
> <Modal key={this.state.newKey} visible={this.state.visible} />
> ```
### Modal.xxx()
### Modal.method()
There are five ways to display the information based on the content's nature:
@ -67,6 +67,13 @@ The properties of the object are follows:
| cancelText | Text of cancel button | string | Cancel |
| maskClosable | Determine whether to close the modal dialog when clicked mask of it. | Boolean | `false` |
All the `Modal.method`s will return a reference, and then we can close the popup by the reference.
```jsx
const ref = Modal.info();
ref.destroy();
```
<style>
.code-box-demo .ant-btn {
margin-right: 8px;

13
components/modal/index.zh-CN.md
Unescape Escape View File

@ -11,7 +11,7 @@ title: Modal
需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。
另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 `ant.Modal.confirm()` 等方法。
另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 `antd.Modal.confirm()` 等方法。
## API
@ -37,11 +37,11 @@ title: Modal
> `<Modal />` 组件有标准的 React 生命周期，关闭后状态不会自动清空。
> 如果希望每次打开都是新内容，需要自行手动清空旧的状态。或者打开时给 Modal 设置一个[全新的 key](https://github.com/ant-design/ant-design/issues/4165)， React 会渲染出一个全新的对话框。
> ```
> ```jsx
> <Modal key={this.state.newKey} visible={this.state.visible} />
> ```
### Modal.xxx()
### Modal.method()
包括：
@ -65,6 +65,13 @@ title: Modal
| cancelText | 取消按钮文字 | string | 取消 |
| maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` |
以上函数调用后，会返回一个引用，可以通过该引用关闭弹窗。
```jsx
const ref = Modal.info();
ref.destroy();
```
<style>
.code-box-demo .ant-btn {
margin-right: 8px;

Write Preview
Loading…
Cancel
Save