Skip to content
Permalink
Browse files

feat(module:modal): support for custom close icons (#4072)

  • Loading branch information...
hsuanxyz committed Sep 6, 2019
1 parent 207e178 commit 06b895e2a158dc999aa613a0d4855bae8ebc6b47
@@ -50,6 +50,7 @@ The dialog is currently divided into 2 modes, `normal mode` and `confirm box mod
| 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 type of the `nz-button`.</i> | `string` | primary |
| 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 |
@@ -52,6 +52,7 @@ import { NzModalModule } from 'ng-zorro-antd/modal';
| nzOkType | 确认按钮类型。<i>与button的type类型值一致</i> | `string` | primary |
| nzStyle | 可用于设置浮层的样式,调整浮层位置等 | `object` | - |
| nzTitle | 标题。<i>留空表示不展示标题。TemplateRef的使用方法可参考案例</i> | string<br>TemplateRef | - |
| nzCloseIcon | 自定义关闭图标 | `string\|TemplateRef<void>` | - |
| nzVisible | 对话框是否可见。<i>当以 `<nz-modal>` 标签使用时,请务必使用双向绑定,例如:`[(nzVisible)]="visible"`</i> | `boolean` | `false` |
| nzWidth | 宽度。<i>使用数字时,默认单位为px</i> | string<br>number | 520 |
| nzClassName | 对话框的类名 | `string` | - |
@@ -29,7 +29,9 @@
<div class="ant-modal-content">
<button *ngIf="nzClosable" (click)="onClickCloseBtn()" class="ant-modal-close" aria-label="Close">
<span class="ant-modal-close-x">
<i nz-icon nzType="close" class="ant-modal-close-icon"></i>
<ng-container *nzStringTemplateOutlet="nzCloseIcon">
<i nz-icon [nzType]="nzCloseIcon" class="ant-modal-close-icon"></i>
</ng-container>
</span>
</button>
<ng-container *ngIf="!hidden" [ngSwitch]="true">
@@ -84,6 +84,7 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R>
@Input() nzClassName: string;
@Input() nzStyle: object;
@Input() nzTitle: string | TemplateRef<{}>;
@Input() nzCloseIcon: string | TemplateRef<void> = 'close';
@Input() nzMaskStyle: object;
@Input() nzBodyStyle: object;
@Input() nzOkText: string | null;
@@ -11,7 +11,7 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzNoAnimationModule } from 'ng-zorro-antd/core';
import { NzAddOnModule, NzNoAnimationModule } from 'ng-zorro-antd/core';
import { NzI18nModule } from 'ng-zorro-antd/i18n';
import { NzIconModule } from 'ng-zorro-antd/icon';

@@ -25,6 +25,7 @@ import { NzModalServiceModule } from './nz-modal.service.module';
imports: [
CommonModule,
OverlayModule,
NzAddOnModule,
NzI18nModule,
NzButtonModule,
NzIconModule,
@@ -431,7 +431,6 @@ describe('global config', () => {
inputFixture.detectChanges();
nativeElement!.click();
inputFixture.detectChanges();
console.log(inputFixture.debugElement.nativeElement);
expectModalHidden(inputFixture.debugElement.query(By.css('nz-modal')).nativeElement, true);
}));
});
@@ -443,7 +442,7 @@ describe('NzModal', () => {

beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
imports: [NoopAnimationsModule, NzModalModule],
imports: [NoopAnimationsModule, NzModalModule, NzIconTestModule],
declarations: [NzDemoModalBasicComponent, NzDemoModalMaskComponent, ModalByServiceComponent]
});

@@ -477,6 +476,17 @@ describe('NzModal', () => {
fixture.detectChanges();
expect(overlayContainerElement.textContent).not.toContain('BASIC_MODAL_TITLE');
}));

it('should custom close icon work', fakeAsync(() => {
fixture.componentInstance.modalAvailable = true;
fixture.componentInstance.icon = 'close-square';
fixture.detectChanges();
tick(1000);
fixture.detectChanges();
const closeIcon = overlayContainerElement.querySelector('.ant-modal-close-icon') as HTMLElement;
expect(closeIcon).toBeTruthy();
expect(closeIcon.classList).toContain('anticon-close-square');
}));
});

describe('created by service', () => {
@@ -721,13 +731,14 @@ describe('NzModal', () => {

@Component({
template: `
<nz-modal *ngIf="modalAvailable" nzVisible nzTitle="BASIC_MODAL_TITLE">
<nz-modal *ngIf="modalAvailable" nzVisible nzTitle="BASIC_MODAL_TITLE" [nzCloseIcon]="icon">
<p>content</p>
</nz-modal>
`
})
class NzDemoModalBasicComponent {
modalAvailable = true;
icon = 'close';
}

@Component({
@@ -27,6 +27,7 @@ export interface ModalOptions<T = any, R = any> {
nzStyle?: object;
nzIconType?: string; // Confirm Modal ONLY
nzTitle?: string | TemplateRef<{}>;
nzCloseIcon?: string | TemplateRef<void>;
nzContent?: string | TemplateRef<{}> | Type<T>;
nzComponentParams?: Partial<T>;
nzClosable?: boolean;

0 comments on commit 06b895e

Please sign in to comment.
You can’t perform that action at this time.