diff --git a/components/popconfirm/demo/custom-icon.md b/components/popconfirm/demo/custom-icon.md new file mode 100644 index 00000000000..4705de58d99 --- /dev/null +++ b/components/popconfirm/demo/custom-icon.md @@ -0,0 +1,14 @@ +--- +order: 4 +title: + zh-CN: 自定义 icon 图标 + en-US: Customize icon +--- + +## zh-CN + +使用 `nzIcon` 自定义提示图标。 + +## en-US + +Set `nzIcon` to customize the icon. diff --git a/components/popconfirm/demo/custom-icon.ts b/components/popconfirm/demo/custom-icon.ts new file mode 100644 index 00000000000..feb99cb224f --- /dev/null +++ b/components/popconfirm/demo/custom-icon.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; +import { NzMessageService } from 'ng-zorro-antd'; + +@Component({ + selector: 'nz-demo-popconfirm-custom-icon', + template: ` + Delete + + + + ` +}) + +export class NzDemoPopconfirmCustomIconComponent { +} diff --git a/components/popconfirm/doc/index.en-US.md b/components/popconfirm/doc/index.en-US.md index 18e762a2e58..9c0f447c8db 100644 --- a/components/popconfirm/doc/index.en-US.md +++ b/components/popconfirm/doc/index.en-US.md @@ -18,13 +18,14 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha | Param | Description | Type | Default value | | ----- | ----------- | ---- | ------------- | -| `[nzCancelText]` | text of the Cancel button | `string` | `'Cancel'` | -| `[nzOkText]` | text of the Confirm button | `string` | `'Confirm'` | +| `[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'` | -| `[nzTitle]` | title of the confirmation box | `string|TemplateRef` | - | +| `[nzTitle]` | Title of the confirmation box | `string|TemplateRef` | - | | `[nzCondition]` | Whether to directly emit `onConfirm` without showing Popconfirm | `boolean` | `false` | -| `(nzOnCancel)` | callback of cancel | `EventEmitter` | - | -| `(nzOnConfirm)` | callback of confirmation | `EventEmitter` | - | +| `[nzIcon]` | Customize icon of confirmation | `string|TemplateRef` | - | +| `(nzOnCancel)` | Callback of cancel | `EventEmitter` | - | +| `(nzOnConfirm)` | Callback of confirmation | `EventEmitter` | - | 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 5b042dc1d82..1ce6679854d 100644 --- a/components/popconfirm/doc/index.zh-CN.md +++ b/components/popconfirm/doc/index.zh-CN.md @@ -24,6 +24,7 @@ title: Popconfirm | `[nzOkType]` | 确认按钮类型 | `'primary'|'ghost'|'dashed'|'danger'|'default'` | `'primary'` | | `[nzTitle]` | 确认框的描述 | `string|TemplateRef` | - | | `[nzCondition]` | 是否直接触发 `nzOnConfirm` 而不弹出框 | `boolean` | `false` | +| `[nzIcon]` | 自定义弹出框的 icon | `string|TemplateRef` | - | | `(nzOnCancel)` | 点击取消的回调 | `EventEmitter` | - | | `(nzOnConfirm)` | 点击确认的回调 | `EventEmitter` | - | diff --git a/components/popconfirm/nz-popconfirm.component.html b/components/popconfirm/nz-popconfirm.component.html index 89fffbc5689..65d50cd958e 100644 --- a/components/popconfirm/nz-popconfirm.component.html +++ b/components/popconfirm/nz-popconfirm.component.html @@ -21,7 +21,9 @@
- + + +
{{ nzTitle }}
diff --git a/components/popconfirm/nz-popconfirm.component.ts b/components/popconfirm/nz-popconfirm.component.ts index f046a36e4f8..0ffd44d0391 100644 --- a/components/popconfirm/nz-popconfirm.component.ts +++ b/components/popconfirm/nz-popconfirm.component.ts @@ -1,4 +1,13 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + EventEmitter, + Input, + Output, + TemplateRef, + ViewEncapsulation +} from '@angular/core'; import { zoomBigMotion } from '../core/animation/zoom'; import { InputBoolean } from '../core/util/convert'; import { NzToolTipComponent } from '../tooltip/nz-tooltip.component'; @@ -25,6 +34,7 @@ export class NzPopconfirmComponent extends NzToolTipComponent { @Input() nzOkType: string = 'primary'; @Input() nzCancelText: string; @Input() @InputBoolean() nzCondition = false; + @Input() nzIcon: string | TemplateRef; @Output() readonly nzOnCancel: EventEmitter = new EventEmitter(); @Output() readonly nzOnConfirm: EventEmitter = new EventEmitter(); diff --git a/components/popconfirm/nz-popconfirm.directive.ts b/components/popconfirm/nz-popconfirm.directive.ts index 7dccc4bdcf4..a443ca79a80 100644 --- a/components/popconfirm/nz-popconfirm.directive.ts +++ b/components/popconfirm/nz-popconfirm.directive.ts @@ -8,7 +8,7 @@ import { OnInit, Optional, Output, - Renderer2, + Renderer2, TemplateRef, ViewContainerRef } from '@angular/core'; @@ -40,12 +40,14 @@ export class NzPopconfirmDirective extends NzTooltipDirective implements OnInit 'nzOkText', 'nzOkType', 'nzCancelText', - 'nzCondition' + 'nzCondition', + 'nzIcon' ]; @Input() nzOkText: string; @Input() nzOkType: string; @Input() nzCancelText: string; + @Input() nzIcon: string | TemplateRef; @Input() @InputBoolean() nzCondition: boolean; @Output() readonly nzOnCancel = new EventEmitter(); @Output() readonly nzOnConfirm = new EventEmitter(); diff --git a/components/popconfirm/nz-popconfirm.module.ts b/components/popconfirm/nz-popconfirm.module.ts index b54bffbd772..46fe1a4e6f2 100644 --- a/components/popconfirm/nz-popconfirm.module.ts +++ b/components/popconfirm/nz-popconfirm.module.ts @@ -13,7 +13,14 @@ import { NzPopconfirmDirective } from './nz-popconfirm.directive'; @NgModule({ declarations : [ NzPopconfirmComponent, NzPopconfirmDirective ], exports : [ NzPopconfirmComponent, NzPopconfirmDirective ], - imports : [ CommonModule, NzButtonModule, OverlayModule, NzI18nModule, NzIconModule, NzAddOnModule ], + imports : [ + CommonModule, + NzButtonModule, + OverlayModule, + NzI18nModule, + NzIconModule, + NzAddOnModule + ], entryComponents: [ NzPopconfirmComponent ] }) diff --git a/components/popconfirm/nz-popconfirm.spec.ts b/components/popconfirm/nz-popconfirm.spec.ts index 1d13d742b63..c7bdd44e834 100644 --- a/components/popconfirm/nz-popconfirm.spec.ts +++ b/components/popconfirm/nz-popconfirm.spec.ts @@ -245,18 +245,50 @@ describe('NzPopconfirm', () => { const triggerElement = component.inBtnGroup.nativeElement; expect(triggerElement.nextSibling.tagName).toBe('BUTTON'); })); + it('should support custom icon', fakeAsync(() => { + component.icon = 'question-circle'; + const triggerElement = component.iconTemplate.nativeElement; + dispatchMouseEvent(triggerElement, 'click'); + fixture.detectChanges(); + tick(500); + fixture.detectChanges(); + expect(overlayContainerElement.querySelector('.anticon-exclamation-circle')).toBeFalsy(); + expect(overlayContainerElement.querySelector('.anticon-question-circle')).toBeTruthy(); + })); }); }); @Component({ selector: 'nz-popconfirm-test-new', template: ` - Delete - Delete + + Delete + + + Delete + + + Delete + title-template
- +
` @@ -265,17 +297,19 @@ export class NzpopconfirmTestNewComponent { confirm = jasmine.createSpy('confirm'); cancel = jasmine.createSpy('cancel'); condition = false; + icon: string = undefined; @ViewChild('stringTemplate') stringTemplate: ElementRef; @ViewChild('templateTemplate') templateTemplate: ElementRef; @ViewChild('inBtnGroup') inBtnGroup: ElementRef; - + @ViewChild('iconTemplate') iconTemplate: ElementRef; } @Component({ selector: 'nz-popconfirm-test-wrapper', template: ` - Show + Show + @@ -291,7 +325,8 @@ export class NzpopconfirmTestNewComponent { Show - + Show `