diff --git a/components/alert/alert.component.ts b/components/alert/alert.component.ts index b6c33d4dae..57e1e617e5 100644 --- a/components/alert/alert.component.ts +++ b/components/alert/alert.component.ts @@ -50,9 +50,14 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'alert'; [@slideAlertMotion] (@slideAlertMotion.done)="onFadeAnimationDone()" > - - - +
+ + + + + + +
{{ nzMessage }} @@ -103,6 +108,7 @@ export class NzAlertComponent implements OnChanges, OnDestroy, OnInit { @Input() @WithConfig() @InputBoolean() nzShowIcon: boolean = false; @Input() @InputBoolean() nzBanner = false; @Input() @InputBoolean() nzNoAnimation = false; + @Input() nzIcon: string | TemplateRef | null = null; @Output() readonly nzOnClose = new EventEmitter(); closed = false; iconTheme: 'outline' | 'fill' = 'fill'; diff --git a/components/alert/alert.spec.ts b/components/alert/alert.spec.ts index 3bba8ff1cb..7daeac23f5 100644 --- a/components/alert/alert.spec.ts +++ b/components/alert/alert.spec.ts @@ -14,7 +14,12 @@ describe('alert', () => { waitForAsync(() => { TestBed.configureTestingModule({ imports: [BidiModule, NzAlertModule, NoopAnimationsModule, NzIconTestModule], - declarations: [NzDemoTestBasicComponent, NzDemoTestBannerComponent, NzTestAlertRtlComponent] + declarations: [ + NzDemoTestBasicComponent, + NzDemoTestBannerComponent, + NzTestAlertRtlComponent, + NzTestAlertCustomIconComponent + ] }); TestBed.compileComponents(); }) @@ -93,8 +98,10 @@ describe('alert', () => { testComponent.showIcon = true; testComponent.iconType = 'lock'; fixture.detectChanges(); - expect(alert.nativeElement.querySelector('.ant-alert-icon').classList).toContain('anticon'); - expect(alert.nativeElement.querySelector('.ant-alert-icon').classList).toContain('anticon-lock'); + expect(alert.nativeElement.querySelector('.ant-alert-icon').firstElementChild.classList).toContain('anticon'); + expect(alert.nativeElement.querySelector('.ant-alert-icon').firstElementChild.classList).toContain( + 'anticon-lock' + ); }); it('should type work', () => { const listOfType = ['success', 'info', 'warning', 'error']; @@ -139,6 +146,15 @@ describe('alert', () => { expect(alert.nativeElement.firstElementChild!.classList).not.toContain('ant-alert-rtl'); }); }); + describe('custom icon', () => { + it('should custom icon work', () => { + const fixture = TestBed.createComponent(NzTestAlertCustomIconComponent); + const alert = fixture.debugElement.query(By.directive(NzAlertComponent)); + fixture.detectChanges(); + expect(alert.nativeElement.querySelector('.ant-alert-icon')).toBeDefined(); + expect(alert.nativeElement.querySelector('.ant-alert-icon').firstElementChild).not.toContain('anticon'); + }); + }); }); @Component({ @@ -190,3 +206,20 @@ export class NzTestAlertRtlComponent { @ViewChild(Dir) dir!: Dir; direction = 'rtl'; } + +@Component({ + template: ` + + + +
S
+
+ ` +}) +export class NzTestAlertCustomIconComponent {} diff --git a/components/alert/demo/custom-icon.md b/components/alert/demo/custom-icon.md new file mode 100644 index 0000000000..8f75f4af82 --- /dev/null +++ b/components/alert/demo/custom-icon.md @@ -0,0 +1,15 @@ +--- +order: 8 +title: + zh-CN: 自定义图标 + en-US: Custom icon +--- + +## zh-CN + +让信息类型更加醒目, 满足定制化需求。 + + +## en-US + +Make information more clear and more friendly and meet customized needs. diff --git a/components/alert/demo/custom-icon.ts b/components/alert/demo/custom-icon.ts new file mode 100644 index 0000000000..54ef21f1b3 --- /dev/null +++ b/components/alert/demo/custom-icon.ts @@ -0,0 +1,26 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-alert-custom-icon', + template: ` + + + +
S
+
+ `, + styles: [ + ` + nz-alert { + margin-bottom: 16px; + } + ` + ] +}) +export class NzDemoAlertCustomIconComponent {} diff --git a/components/alert/doc/index.en-US.md b/components/alert/doc/index.en-US.md index f1b8da9111..7e071b156d 100644 --- a/components/alert/doc/index.en-US.md +++ b/components/alert/doc/index.en-US.md @@ -31,4 +31,5 @@ import { NzAlertModule } from 'ng-zorro-antd/alert'; | `[nzShowIcon]` | Whether to show icon, in `nzBanner` mode default is `true` | `boolean` | `false` | ✅ | | `[nzIconType]` | Icon type, effective when `nzShowIcon` is `true` | `string` | - | | `[nzType]` | Type of Alert styles, in `nzBanner` mode default is `'warning'` | `'success' \| 'info' \| 'warning' \| 'error'` | `'info'` | +| `[nzIcon]` | Custom icon, effective when showIcon is true | `string \| TemplateRef` | - | | `(nzOnClose)` | Callback when Alert is closed | `EventEmitter` | - | diff --git a/components/alert/doc/index.zh-CN.md b/components/alert/doc/index.zh-CN.md index 10d36504ba..13bc981a38 100644 --- a/components/alert/doc/index.zh-CN.md +++ b/components/alert/doc/index.zh-CN.md @@ -32,4 +32,5 @@ import { NzAlertModule } from 'ng-zorro-antd/alert'; | `[nzShowIcon]` | 是否显示辅助图标,`nzBanner` 模式下默认值为 `true` | `boolean` | `false` | ✅ | | `[nzIconType]` | 自定义图标类型,`nzShowIcon` 为 `true` 时有效 | `string` | - | | `[nzType]` | 指定警告提示的样式,`nzBanner` 模式下默认值为 `'warning'` | `'success' \| 'info' \| 'warning' \| 'error'` | `'info'` | +| `[nzIcon]` | 自定义图标,showIcon 为 true 时有效 | `string \| TemplateRef` | - | | `(nzOnClose)` | 关闭时触发的回调函数 | `EventEmitter` | - | diff --git a/components/alert/style/patch.less b/components/alert/style/patch.less index 1bd7be6dc7..e8fd4f3191 100644 --- a/components/alert/style/patch.less +++ b/components/alert/style/patch.less @@ -1,3 +1,9 @@ nz-alert { display: block; } + +.@{alert-prefix-cls} { + &-icon { + line-height: 1; + } +}