Skip to content

Commit

Permalink
feat(module:popover): support standalone component (#8231)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ParsaArvanehPA
ParsaArvanehPA authored Dec 1, 2023
1 parent 86a49d2 commit f7468e2
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 55 deletions.
33 changes: 17 additions & 16 deletions components/popover/doc/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,22 +19,23 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover';

## API

### [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` | - |
### [nz-popover]:standalone

| 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` | - |

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
35 changes: 18 additions & 17 deletions components/popover/doc/index.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,23 +20,24 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover';

## API

### [nz-popover]

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `[nzPopoverArrowPointAtCenter]` | 箭头指向锚点的中心 | `boolean` | `false` |
| `[nzPopoverTitle]` | 标题 | `string \| TemplateRef<void>` | - |
| `[nzPopoverContent]` | 用于定义内容 | `string \| TemplateRef<void>` | - |
| `[nzPopoverTrigger]` | 触发行为，为 `null` 时不响应光标事件 | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` |
| `[nzPopoverPlacement]` | 气泡框位置 | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom' \| Array<string>` | `'top'` |
| `[nzPopoverOrigin]` | 气泡框定位元素 | `ElementRef` | - |
| `[nzPopoverVisible]` | 显示隐藏气泡框 | `boolean` | `false` |
| `(nzPopoverVisibleChange)` | 显示隐藏的事件 | `EventEmitter<boolean>` | - |
| `[nzPopoverMouseEnterDelay]` | 鼠标移入后延时多少才显示气泡框，单位：秒 | `number` | `0.15` |
| `[nzPopoverMouseLeaveDelay]` | 鼠标移出后延时多少才隐藏气泡框，单位：秒 | `number` | `0.1` |
| `[nzPopoverOverlayClassName]` | 卡片类名 | `string` | - |
| `[nzPopoverOverlayStyle]` | 卡片样式 | `object` | - |
| `[nzPopoverBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` |
### [nz-popover]:standalone

| 参数 | 说明 | 类型 | 默认值 |
| ------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `[nzPopoverArrowPointAtCenter]` | 箭头指向锚点的中心 | `boolean` | `false` |
| `[nzPopoverTitle]` | 标题 | `string \| TemplateRef<void>` | - |
| `[nzPopoverContent]` | 用于定义内容 | `string \| TemplateRef<void>` | - |
| `[nzPopoverTrigger]` | 触发行为，为 `null` 时不响应光标事件 | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` |
| `[nzPopoverPlacement]` | 气泡框位置 | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom' \| Array<string>` | `'top'` |
| `[nzPopoverOrigin]` | 气泡框定位元素 | `ElementRef` | - |
| `[nzPopoverVisible]` | 显示隐藏气泡框 | `boolean` | `false` |
| `(nzPopoverVisibleChange)` | 显示隐藏的事件 | `EventEmitter<boolean>` | - |
| `[nzPopoverMouseEnterDelay]` | 鼠标移入后延时多少才显示气泡框，单位：秒 | `number` | `0.15` |
| `[nzPopoverMouseLeaveDelay]` | 鼠标移出后延时多少才隐藏气泡框，单位：秒 | `number` | `0.1` |
| `[nzPopoverOverlayClassName]` | 卡片类名 | `string` | - |
| `[nzPopoverOverlayStyle]` | 卡片样式 | `object` | - |
| `[nzPopoverBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` |

更多属性请参考 [Tooltip](/components/tooltip/zh#api)。

## 注意
Expand Down
21 changes: 2 additions & 19 deletions components/popover/popover.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,12 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/

import { BidiModule } from '@angular/cdk/bidi';
import { OverlayModule } from '@angular/cdk/overlay';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
import { NzOverlayModule } from 'ng-zorro-antd/core/overlay';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';

import { NzPopoverComponent, NzPopoverDirective } from './popover';

@NgModule({
exports: [NzPopoverDirective, NzPopoverComponent],
declarations: [NzPopoverDirective, NzPopoverComponent],
imports: [
BidiModule,
CommonModule,
OverlayModule,
NzOutletModule,
NzOverlayModule,
NzNoAnimationModule,
NzToolTipModule
]
imports: [NzPopoverDirective, NzPopoverComponent],
exports: [NzPopoverDirective, NzPopoverComponent]
})
export class NzPopoverModule {}
13 changes: 10 additions & 3 deletions components/popover/popover.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
*/

import { Directionality } from '@angular/cdk/bidi';
import { OverlayModule } from '@angular/cdk/overlay';
import { NgClass, NgIf, NgStyle } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Expand All @@ -24,7 +26,9 @@ import {

import { zoomBigMotion } from 'ng-zorro-antd/core/animation';
import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
import { NzNoAnimationDirective, NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
import { NzOverlayModule } from 'ng-zorro-antd/core/overlay';
import { BooleanInput, NgStyleInterface, NzTSType } from 'ng-zorro-antd/core/types';
import { InputBoolean } from 'ng-zorro-antd/core/util';
import {
Expand All @@ -42,7 +46,8 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'popover';
exportAs: 'nzPopover',
host: {
'[class.ant-popover-open]': 'visible'
}
},
standalone: true
})
export class NzPopoverDirective extends NzTooltipBaseDirective {
static ngAcceptInputType_nzPopoverArrowPointAtCenter: BooleanInput;
Expand Down Expand Up @@ -136,7 +141,9 @@ export class NzPopoverDirective extends NzTooltipBaseDirective {
</div>
</div>
</ng-template>
`
`,
imports: [OverlayModule, NzOverlayModule, NgClass, NgStyle, NzNoAnimationModule, NgIf, NzOutletModule],
standalone: true
})
export class NzPopoverComponent extends NzToolTipComponent {
override _prefix = 'ant-popover';
Expand Down

0 comments on commit f7468e2

Please sign in to comment.