mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-07-28 18:19:10 +08:00
Code Issues Actions 21 Packages Projects Releases Wiki Activity

docs: update Modal English doc (#7537)

Browse Source 
Fixed several typos.
This commit is contained in:
Khalifa Lame 2017-09-11 04:08:18 +01:00 committed by Benjy Cui
parent 643b32d0d3
commit b381f1f5ec
1 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
components/modal/index.en-US.md
View File

@ -8,9 +8,9 @@ Modal dialogs.
## When To Use ## When To Use
When requiring users to interact with application, but without jumping to a new page to interrupt When requiring users to interact with the application, but without jumping to a new page and interrupting
the user's workflow, you can use `Modal` to create a new floating layer over the current page for user the user's workflow, you can use `Modal` to create a new floating layer over the current page to get user
getting feedback or information purposes. feedback or display information.
Additionally, if you need show a simple confirmation dialog, you can use `antd.Modal.confirm()`, Additionally, if you need show a simple confirmation dialog, you can use `antd.Modal.confirm()`,
and so on. and so on.
@ -18,28 +18,28 @@ and so on.
| Property | Description | Type | Default | | Property | Description | Type | Default |
|------------|----------------|------------------|--------------| |------------|----------------|------------------|--------------|
| visible | Determine whether a modal dialog is visible or not | boolean | no | | visible | Whether the modal dialog is visible or not | boolean | false |
| confirmLoading | Determine whether to apply loading visual effect for OK button or not | boolean | no | | confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false |
| title | The modal dialog's title | string\|ReactNode | no | | title | The modal dialog's title | string\|ReactNode | - |
| closable | Determine whether a close (x) button is visible on top right of the modal dialog or not | boolean | true | | closable | 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(e) | no | | onOk | Specify a function that will be called when a user clicks the OK button | function(e) | - |
| onCancel | Specify a function that will be called when a user clicked mask, close button on top right or cancel button | function(e) | no | | onCancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | function(e) | - |
| width | Width of a modal dialog | string\|number | 520 | | width | Width of the modal dialog | string\|number | 520 |
| footer | Footer content, set as `footer={null}` when you don't need default buttons | string\|ReactNode | OK and cancel button | | footer | Footer content, set as `footer={null}` when you don't need default buttons | string\|ReactNode | OK and Cancel buttons |
| okText | Text of the OK button | string | OK | | okText | Text of the OK button | string | `OK` |
| okType | type of the confirmation button | string | primary | | okType | Button `type` of the OK button | string | `primary` |
| cancelText | Text of the Cancel button | string | Cancel | | cancelText | Text of the Cancel button | string | `Cancel` |
| maskClosable | Determine whether to close the modal dialog when clicked mask of it. | boolean | true | | maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | true |
| style | Style of floating layer, typically used at least for adjusting the position. | object | - | | 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 | - | | wrapClassName | The class name of the container of the modal dialog | string | - |
| afterClose | Specify a function that will be called when modal is closed completely. | function | - | | afterClose | Specify a function that will be called when modal is closed completely. | function | - |
| getContainer | Return the mount node for Modal | (instance): HTMLElement | () => document.body | | getContainer | Return the mount node for Modal | (instance): HTMLElement | () => document.body |
| zIndex | To set the `z-index` of Modal | Number | 1000 | | zIndex | The `z-index` of the Modal | Number | 1000 |
#### Destroy on close #### Destroy on close
> The state of Modal will be preserved at it's component lifecircle. > The state of Modal will be preserved at it's component lifecycle.
> If you wish to open it with brand new state everytime, you need to reset state manually. > If you wish to open it with a brand new state everytime, you need to reset state manually.
### Modal.method() ### Modal.method()
@ -56,19 +56,19 @@ The properties of the object are follows:
| Property | Description | Type | Default | | Property | Description | Type | Default |
|------------|----------------|------------------|---------------| |------------|----------------|------------------|---------------|
| title | Title | string\|ReactNode | no | | title | Title | string\|ReactNode | - |
| content | Content | string\|ReactNode | no | | content | Content | string\|ReactNode | - |
| 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 | | onOk | Specify a function that will be called when the user clicks the 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 | - |
| 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 | | onCancel | Specify a function that will be called when the user clicks the 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 | - |
| width | Width of dialog | string\|number | 416 | | width | Width of the modal dialog | string\|number | 416 |
| iconType | Type of Icon component | string | question-circle | | iconType | Icon `type` of the Icon component | string | `question-circle` |
| okText | Text of OK button | string | OK | | okText | Text of the OK button | string | `OK` |
| okType | type of the confirmation button | string | primary | | okType | Button `type` of the OK button | string | `primary` |
| cancelText | Text of cancel button | string | Cancel | | cancelText | Text of the Cancel button | string | `Cancel` |
| maskClosable | Determine whether to close the modal dialog when clicked mask of it. | Boolean | `false` | | maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` |
| zIndex | To set the `z-index` of Modal | Number | 1000 | | zIndex | The `z-index` of the Modal | Number | 1000 |
All the `Modal.method`s will return a reference, and then we can close the popup by the reference. All the `Modal.method`s will return a reference, and then we can close the modal dialog by the reference.
```jsx ```jsx
const ref = Modal.info(); const ref = Modal.info();