Skip to content

Commit

Permalink
feat(module:popover): add nzPopoverOverlayClickable to disable clic…
Browse files Browse the repository at this point in the history 
…k on mask (#8878)
  • Loading branch information
@OriginRing
OriginRing authored Jan 16, 2025
1 parent 9ecbb29 commit 5898da7
Show file tree
Hide file tree
Showing 8 changed files with 117 additions and 30 deletions.
2 changes: 1 addition & 1 deletion components/popconfirm/doc/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
| `[nzPopconfirmBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` |

| Param | Description | Type | Default value | Global Config |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ------------- | ------------- |
| ------------------- |-------------------------------------------------------------------------------------------------------------------------------------------------------| -------------------------------------------------------------------- | ------------- | ------------- |
| `[nzCancelText]` | Text of the Cancel button | `string` | `'Cancel'` | - |
| `[nzOkText]` | Text of the Confirm button | `string` | `'Confirm'` | - |
| `[nzOkType]` | Button `type` of the Confirm button | `'primary' \| 'ghost' \| 'dashed' \| 'danger' \| 'default'` | `'primary'` | - |
Expand Down
14 changes: 14 additions & 0 deletions components/popover/demo/overlay.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
order: 8
title:
zh-CN: 禁止通过蒙层关闭面板
en-US: Disable closing popover through mask
---

## zh-CN

在 `nzPopoverTrigger` 为 `'click'` 时，通过设置 `nzPopoverOverlayClickable` 为 `false` 禁止通过点击蒙层关闭面板。

## en-US

Set `nzPopoverOverlayClickable` to be `false` to disable closing popover by clicking the mask when `nzPopoverTrigger` is `'click'`.
33 changes: 33 additions & 0 deletions components/popover/demo/overlay.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { Component } from '@angular/core';

import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzPopoverModule } from 'ng-zorro-antd/popover';

@Component({
selector: 'nz-demo-popover-overlay',
imports: [NzButtonModule, NzPopoverModule],
template: `
<button
nz-button
nz-popover
nzType="primary"
nzPopoverTitle="Title"
nzPopoverTrigger="click"
[nzPopoverContent]="contentTemplate"
[nzPopoverOverlayClickable]="false"
[nzPopoverVisible]="visible"
(nzPopoverVisibleChange)="visibleChange($event)"
>Click me</button
>
<ng-template #contentTemplate>
<button nz-button nzSize="small" nzType="primary" (click)="visibleChange(false)"> Close me </button>
</ng-template>
`
})
export class NzDemoPopoverOverlayComponent {
visible = false;

visibleChange(value: boolean): void {
this.visible = value;
}
}
29 changes: 15 additions & 14 deletions components/popover/doc/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,20 +21,21 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover';

### [nz-popover]

| Param | Description | Type | Default value |
| ------------------------------- | ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `[nzPopoverArrowPointAtCenter]` | Arrow point at center of the origin | `boolean` | `false` |
| `[nzPopoverTitle]` | Title of the popover | `string \| TemplateRef<void>` | - |
| `[nzPopoverContent]` | Content of the popover | `string \| TemplateRef<void>` | - |
| `[nzPopoverTrigger]` | Popover trigger mode. If set to `null` it would not be triggered | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` |
| `[nzPopoverPlacement]` | The position of the popover relative to the target | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom' \| Array<string>` | `'top'` |
| `[nzPopoverOrigin]` | Origin of the tooltip | `ElementRef` | - |
| `[nzPopoverVisible]` | Show or hide popover | `boolean` | `false` |
| `(nzPopoverVisibleChange)` | Callback of hide or show | `EventEmitter<boolean>` | - |
| `[nzPopoverMouseEnterDelay]` | Delay in seconds, before popover is shown on mouse enter | `number` | `0.15` |
| `[nzPopoverMouseLeaveDelay]` | Delay in seconds, before popover is hidden on mouse leave | `number` | `0.1` |
| `[nzPopoverOverlayClassName]` | Class name of the popover card | `string` | - |
| `[nzPopoverOverlayStyle]` | Style of the popover card | `object` | - |
| Param | Description | Type | Default value |
| ------------------------------- | ---------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `[nzPopoverArrowPointAtCenter]` | Arrow point at center of the origin | `boolean` | `false` |
| `[nzPopoverTitle]` | Title of the popover | `string \| TemplateRef<void>` | - |
| `[nzPopoverContent]` | Content of the popover | `string \| TemplateRef<void>` | - |
| `[nzPopoverTrigger]` | Popover trigger mode. If set to `null` it would not be triggered | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` |
| `[nzPopoverPlacement]` | The position of the popover relative to the target | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom' \| Array<string>` | `'top'` |
| `[nzPopoverOrigin]` | Origin of the tooltip | `ElementRef` | - |
| `[nzPopoverVisible]` | Show or hide popover | `boolean` | `false` |
| `(nzPopoverVisibleChange)` | Callback of hide or show | `EventEmitter<boolean>` | - |
| `[nzPopoverMouseEnterDelay]` | Delay in seconds, before popover is shown on mouse enter | `number` | `0.15` |
| `[nzPopoverMouseLeaveDelay]` | Delay in seconds, before popover is hidden on mouse leave | `number` | `0.1` |
| `[nzPopoverOverlayClassName]` | Class name of the popover card | `string` | - |
| `[nzPopoverOverlayStyle]` | Style of the popover card | `object` | - |
| `[nzPopoverOverlayClickable]` | Click the mask to close the bubble box. Only the `click` trigger behavior is valid | `boolean` | `true` |

Consult [Tooltip's documentation](/components/tooltip/en#api) to find more APIs.
| `[nzPopoverBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` |
Expand Down
Loading

0 comments on commit 5898da7

Please sign in to comment.