Skip to content

Commit

Permalink
docs(module:modal): update index.en-US.md (#7867)
Browse files Browse the repository at this point in the history
  • Loading branch information
arturovt committed Mar 29, 2023
1 parent 743e662 commit 4bbf83e
Showing 1 changed file with 42 additions and 46 deletions.
88 changes: 42 additions & 46 deletions components/modal/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,9 @@ 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 current page for user
getting feedback or information purposes.
Additionally, if you need show a simple confirmation dialog, you can use `NzModalService.confirm()`,
and so on.
When requiring users to interact with the application 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 to show a simple confirmation dialog, you can use `NzModalService.confirm()` and so on.

It is recommended to use the `Component` way to pop up the Modal, so that the component logic of the popup layer can be completely isolated from the outer component, and can be reused at any time. In the popup layer component, you can obtain Modal's component instance by injecting `NzModalRef` to control the behavior of the modal box.
It is recommended to use the `Component` way to pop up the Modal so that the component logic of the popup layer can be completely isolated from the outer component and reused at any time. In the popup layer component, you can obtain Modal's component instance by injecting `NzModalRef` to control the behavior of the modal box.

```ts
import { NzModalModule } from 'ng-zorro-antd/modal';
Expand All @@ -25,44 +21,44 @@ import { NzModalModule } from 'ng-zorro-antd/modal';

### NzModalService

The dialog is currently divided into 2 modes, `normal mode` and `confirm box mode` (ie the `Confirm` dialog, which is called by calling `confirm/info/success/error/warning`). The degree of API support for the two modes is slightly different.
The dialog is currently divided into 2 modes, `normal mode` and `confirm box mode` (for instance, the `Confirm` dialog, which is called by `confirm/info/success/error/warning`). The degree of API support for the two modes is slightly different.

| Property | Description | Type | Default |
|----|----|----|----|
| nzAfterOpen | Specify a EventEmitter that will be emitted when modal opened | EventEmitter | - |
| nzAfterClose | Specify a EventEmitter that will be emitted when modal is closed completely (Can listen for parameters passed in the close/destroy method) | EventEmitter | - |
| nzBodyStyle | Body style for modal body element. Such as height, padding etc. | `object` | - |
| nzCancelText | Text of the Cancel button. <i>Set to null to show no cancel button (this value is invalid if the nzFooter parameter is used in normal mode)</i> | `string` | Cancel |
| nzCentered | Centered Modal | `boolean` | `false` |
| nzClosable | Whether a close (x) button is visible on top right of the modal dialog or not. <i>Invalid value in confirm box mode (default will be hidden)</i> | `boolean` | `true` |
| nzOkLoading | Whether to apply loading visual effect for OK button or not | `boolean` | `false` |
| nzCancelLoading | Whether to apply loading visual effect for Cancel button or not | `boolean` | `false` |
| nzOkDisabled | Whether to disable Ok button or not | `boolean` | `false` |
| nzCancelDisabled | Whether to disable Cancel button or not | `boolean` | `false` |
| nzFooter | Footer content, set as footer=null when you don't need default buttons. <i>1. Only valid in normal mode.<br>2. You can customize the buttons to the maximum extent by passing a `ModalButtonOptions` configuration (see the case or the instructions below).</i> | string<br>TemplateRef<br>ModalButtonOptions | OK and Cancel buttons |
| nzKeyboard | Whether support press esc to close | `boolean` | `true` |
| nzMask | Whether show mask or not. | `boolean` | `true` ||
| nzMaskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | `boolean` | `true` ||
| nzCloseOnNavigation | Whether to close the modal when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` ||
| nzDirection | Direction of the text in the modal | `'ltr' \| 'rtl'` | - ||
| nzMaskStyle | Style for modal's mask element. | `object` | - |
| nzOkText | Text of the OK button. <i>Set to null to show no ok button (this value is invalid if the nzFooter parameter is used in normal mode)</i> | `string` | OK |
| nzOkType | Button type of the OK button. <i>Consistent with the `nzType` of the `nz-button`.</i> | `string` | `primary` |
| nzOkDanger | Danger status of the OK button. <i>Consistent with the `nzDanger` of the `nz-button`.</i> | `boolean` | `false` |
| nzStyle | Style of floating layer, typically used at least for adjusting the position. | `object` | - |
| nzCloseIcon | Custom close icon | `string\|TemplateRef<void>` | - |
| nzTitle | The modal dialog's title. <i>Leave blank to show no title. The usage of TemplateRef can refer to the case</i> | string / TemplateRef | - |
| nzVisible | Whether the modal dialog is visible or not. <i>When using the `<nz-modal>` tag, be sure to use two-way binding, for example: `[(nzVisible)]="visible"`.</i> | `boolean` | `false` |
| nzWidth | Width of the modal dialog. <i>When using numbers, the default unit is `px`</i> | string<br>number | 520 |
| nzClassName | The class name of the modal dialog | `string` | - |
| nzWrapClassName | The class name of the container of the modal dialog | `string` | - |
| nzZIndex | The z-index of the Modal | `number` | 1000 |
| nzOnCancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button (If nzContent is Component, the Component instance will be put in as an argument). <i>Note: When created with `NzModalService.create`, this parameter should be passed into the type of function (callback function). This function returns a promise, which is automatically closed when the execution is complete or the promise ends (return `false` to prevent closing)</i> | EventEmitter | - |
| nzOnOk | Specify a EventEmitter that will be emitted when a user clicks the OK button (If nzContent is Component, the Component instance will be put in as an argument). <i>Note: When created with `NzModalService.create`, this parameter should be passed into the type of function (callback function). This function returns a promise, which is automatically closed when the execution is complete or the promise ends (return `false` to prevent closing)</i> | EventEmitter | - |
| nzContent | Content | string / TemplateRef / Component / ng-content | - |
| nzComponentParams | Will be instance property when `nzContent` is a component,will be template variable when `nzContent` is `TemplateRef` | `object` | - |
| nzIconType | Icon type of the Icon component. <i>Only valid in confirm box mode</i> | `string` | question-circle |
| nzAutofocus | autofocus and the position,disabled when is `null` | `'ok' \| 'cancel' \| 'auto' \| null` | `'auto'` |
| `nzAfterOpen` | Specify a EventEmitter that will be emitted when modal opened | EventEmitter | - |
| `nzAfterClose` | Specify a EventEmitter that will be emitted when modal is closed completely (Can listen for parameters passed in the close/destroy method) | EventEmitter | - |
| `nzBodyStyle` | Body style for modal body element. Such as height, padding etc. | `object` | - |
| `nzCancelText` | Text of the Cancel button. <i>Set to null to show no cancel button (this value is invalid if the nzFooter parameter is used in normal mode)</i> | `string` | Cancel |
| `nzCentered` | Centered Modal | `boolean` | `false` |
| `nzClosable` | Whether a close (x) button is visible on top right of the modal dialog or not. <i>Invalid value in confirm box mode (default will be hidden)</i> | `boolean` | `true` |
| `nzOkLoading` | Whether to apply loading visual effect for OK button or not | `boolean` | `false` |
| `nzCancelLoading` | Whether to apply loading visual effect for Cancel button or not | `boolean` | `false` |
| `nzOkDisabled` | Whether to disable Ok button or not | `boolean` | `false` |
| `nzCancelDisabled` | Whether to disable Cancel button or not | `boolean` | `false` |
| `nzFooter` | Footer content, set as footer=null when you don't need default buttons. <i>1. Only valid in normal mode.<br>2. You can customize the buttons to the maximum extent by passing a `ModalButtonOptions` configuration (see the case or the instructions below).</i> | string<br>TemplateRef<br>ModalButtonOptions | OK and Cancel buttons |
| `nzKeyboard` | Whether support press esc to close | `boolean` | `true` |
| `nzMask` | Whether show mask or not. | `boolean` | `true` ||
| `nzMaskClosable` | Whether to close the modal dialog when the mask (area outside the modal) is clicked | `boolean` | `true` ||
| `nzCloseOnNavigation` | Whether to close the modal when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` ||
| `nzDirection` | Direction of the text in the modal | `'ltr' \| 'rtl'` | - ||
| `nzMaskStyle` | Style for modal's mask element. | `object` | - |
| `nzOkText` | Text of the OK button. <i>Set to null to show no ok button (this value is invalid if the nzFooter parameter is used in normal mode)</i> | `string` | OK |
| `nzOkType` | Button type of the OK button. <i>Consistent with the `nzType` of the `nz-button`.</i> | `string` | `primary` |
| `nzOkDanger` | Danger status of the OK button. <i>Consistent with the `nzDanger` of the `nz-button`.</i> | `boolean` | `false` |
| `nzStyle` | Style of floating layer, typically used at least for adjusting the position. | `object` | - |
| `nzCloseIcon` | Custom close icon | `string\|TemplateRef<void>` | - |
| `nzTitle` | The modal dialog's title. <i>Leave blank to show no title. The usage of TemplateRef can refer to the case</i> | string / TemplateRef | - |
| `nzVisible` | Whether the modal dialog is visible or not. <i>When using the `<nz-modal>` tag, be sure to use two-way binding, for example: `[(nzVisible)]="visible"`.</i> | `boolean` | `false` |
| `nzWidth` | Width of the modal dialog. <i>When using numbers, the default unit is `px`</i> | string<br>number | 520 |
| `nzClassName` | The class name of the modal dialog | `string` | - |
| `nzWrapClassName` | The class name of the container of the modal dialog | `string` | - |
| `nzZIndex` | The z-index of the Modal | `number` | 1000 |
| `nzOnCancel` | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button (If nzContent is Component, the Component instance will be put in as an argument). <i>Note: When created with `NzModalService.create`, this parameter should be passed into the type of function (callback function). This function returns a promise, which is automatically closed when the execution is complete or the promise ends (return `false` to prevent closing)</i> | EventEmitter | - |
| `nzOnOk` | Specify a EventEmitter that will be emitted when a user clicks the OK button (If nzContent is Component, the Component instance will be put in as an argument). <i>Note: When created with `NzModalService.create`, this parameter should be passed into the type of function (callback function). This function returns a promise, which is automatically closed when the execution is complete or the promise ends (return `false` to prevent closing)</i> | EventEmitter | - |
| `nzContent` | Content | string / TemplateRef / Component / ng-content | - |
| `nzComponentParams` | Will be instance property when `nzContent` is a component,will be template variable when `nzContent` is `TemplateRef` | `object` | - |
| `nzIconType` | Icon type of the Icon component. <i>Only valid in confirm box mode</i> | `string` | question-circle |
| `nzAutofocus` | autofocus and the position,disabled when is `null` | `'ok' \| 'cancel' \| 'auto' \| null` | `'auto'` |

#### Attentions

Expand All @@ -82,7 +78,7 @@ There are five ways to display the information based on the content's nature:
- `NzModalService.warning`
- `NzModalService.confirm`

The items listed above are all functions, expecting a settings object as parameter.
The above items are all functions, expecting a settings object as a parameter.
Consistent with the above API, some property types or initial values are different as follows:

| Property | Description | Type | Default |
Expand All @@ -107,13 +103,13 @@ constructor(modal: NzModalService) {

| Methods/Attributes | Description | Type |
|----|----|----|
| openModals | All currently open Modal list | NzModalRef[] |
| afterAllClose | Callback called after all Modals closed completely | Observable&lt;void&gt; |
| closeAll() | Close all modals | function |
| `openModals` | All currently open Modal list | NzModalRef[] |
| `afterAllClose` | Callback called after all Modals closed completely | Observable&lt;void&gt; |
| `closeAll()` | Close all modals | function |

#### NzModalRef

> NzModalRef object is used to control dialogs and communicate with inside content
> `NzModalRef` object is used to control dialogs and communicate with their content
The dialog created by the service method `NzModalService.xxx()` will return a `NzModalRef` object that is used to manipulate the dialog (this object can also be obtained by dependency injection `NzModalRef` if `nzContent` is used as Component) , This object has the following methods:

Expand Down

0 comments on commit 4bbf83e

Please sign in to comment.