diff --git a/components/popconfirm/demo/custom-icon.ts b/components/popconfirm/demo/custom-icon.ts index ffd8ffb7671..e806ce0b462 100644 --- a/components/popconfirm/demo/custom-icon.ts +++ b/components/popconfirm/demo/custom-icon.ts @@ -4,7 +4,10 @@ import { NzMessageService } from 'ng-zorro-antd'; @Component({ selector: 'nz-demo-popconfirm-custom-icon', template: ` - Custom Icon + Custom Icon + + + ` }) export class NzDemoPopconfirmCustomIconComponent { diff --git a/components/popconfirm/doc/index.en-US.md b/components/popconfirm/doc/index.en-US.md index e08acd5f696..2cc9d902b23 100644 --- a/components/popconfirm/doc/index.en-US.md +++ b/components/popconfirm/doc/index.en-US.md @@ -25,6 +25,7 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha | `[nzCondition]` | Whether to directly emit `onConfirm` without showing Popconfirm | boolean | false | | `(nzOnCancel)` | callback of cancel | `EventEmitter` | - | | `(nzOnConfirm)` | callback of confirmation | `EventEmitter` | - | +| `[nzIcon]` | custom icon | `TemplateRef` | `` | Consult [Tooltip's documentation](/components/tooltip/en#api) to find more APIs. diff --git a/components/popconfirm/doc/index.zh-CN.md b/components/popconfirm/doc/index.zh-CN.md index 12417d86e2b..1b672c64b40 100644 --- a/components/popconfirm/doc/index.zh-CN.md +++ b/components/popconfirm/doc/index.zh-CN.md @@ -26,6 +26,7 @@ title: Popconfirm | `[nzCondition]` | 是否直接触发 `nzOnConfirm` 而不弹出框 | boolean | false | | `(nzOnCancel)` | 点击取消的回调 | `EventEmitter` | 无 | | `(nzOnConfirm)` | 点击确认的回调 | `EventEmitter` | 无 | +| `[nzIcon]` | 自定义图标 | `TemplateRef` | `` | 更多属性请参考 [Tooltip](/components/tooltip/zh#api)。 diff --git a/components/popconfirm/nz-popconfirm.component.html b/components/popconfirm/nz-popconfirm.component.html index 06111f67631..d6fba21ddea 100644 --- a/components/popconfirm/nz-popconfirm.component.html +++ b/components/popconfirm/nz-popconfirm.component.html @@ -18,8 +18,10 @@
- - + + + +
{{ nzTitle }}
diff --git a/components/popconfirm/nz-popconfirm.component.ts b/components/popconfirm/nz-popconfirm.component.ts index a3322eb1b8a..09abcd99957 100644 --- a/components/popconfirm/nz-popconfirm.component.ts +++ b/components/popconfirm/nz-popconfirm.component.ts @@ -3,7 +3,8 @@ import { Component, EventEmitter, Input, - Output + Output, + TemplateRef } from '@angular/core'; import { fadeAnimation } from '../core/animation/fade-animations'; import { toBoolean } from '../core/util/convert'; @@ -31,8 +32,7 @@ export class NzPopconfirmComponent extends NzToolTipComponent { @Input() nzOkText: string; @Input() nzOkType: string = 'primary'; @Input() nzCancelText: string; - @Input() nzIcon: string; - @Input() nzIconColor: string; + @Input() nzIcon: TemplateRef; @Input() set nzCondition(value: boolean) { diff --git a/components/popconfirm/nz-popconfirm.directive.ts b/components/popconfirm/nz-popconfirm.directive.ts index acb080f3c9b..888e9411055 100644 --- a/components/popconfirm/nz-popconfirm.directive.ts +++ b/components/popconfirm/nz-popconfirm.directive.ts @@ -10,6 +10,7 @@ import { Optional, Output, Renderer2, + TemplateRef, ViewContainerRef } from '@angular/core'; @@ -31,7 +32,7 @@ export class NzPopconfirmDirective extends NzTooltipDirective implements OnInit, _okText: string; _okType: string = 'primary'; _cancelText: string; - _icon: string; + _icon: TemplateRef; _iconColor: string; @Output() nzOnCancel: EventEmitter = new EventEmitter(); @@ -78,25 +79,14 @@ export class NzPopconfirmDirective extends NzTooltipDirective implements OnInit, } @Input() - set nzIcon(value: string) { + set nzIcon(value: TemplateRef) { this._icon = value; - this.updateCompValue('nzIcon', value); } - get nzIcon(): string { + get nzIcon(): TemplateRef { return this._icon; } - @Input() - set nzIconColor(value: string) { - this._iconColor = value; - this.updateCompValue('nzIcon', value); - } - - get nzIconColor(): string { - return this._iconColor; - } - constructor( elementRef: ElementRef, hostView: ViewContainerRef, @@ -127,8 +117,7 @@ export class NzPopconfirmDirective extends NzTooltipDirective implements OnInit, 'nzOkType', 'nzCancelText', 'nzCondition', - 'nzIcon', - 'nzIconColor' ]; + 'nzIcon' ]; properties.forEach(property => this.updateCompValue(property, this[ property ])); this.tooltip.nzVisibleChange.pipe(takeUntil(this.subclassUnsubscribe$), distinctUntilChanged()).subscribe(data => { this._visible = data;