diff --git a/components/avatar/avatar.spec.ts b/components/avatar/avatar.spec.ts index 7000d2d2dd..071e209a33 100644 --- a/components/avatar/avatar.spec.ts +++ b/components/avatar/avatar.spec.ts @@ -55,6 +55,18 @@ describe('avatar', () => { expect(getType(dl)).toBe('image'); tick(); })); + it('#nzSrcSet', () => { + context.nzSrcSet = '1.png'; + fixture.detectChanges(); + const el = dl.query(By.css(`img`)).nativeElement as HTMLImageElement; + expect(el.srcset).toBe(context.nzSrcSet); + }); + it('#nzAlt', () => { + context.nzAlt = 'alt'; + fixture.detectChanges(); + const el = dl.query(By.css(`img`)).nativeElement as HTMLImageElement; + expect(el.alt).toBe(context.nzAlt); + }); }); it('#nzIcon', () => { @@ -126,7 +138,24 @@ describe('avatar', () => { context.nzIcon = 'user'; fixture.detectChanges(); - expect(hostStyle.fontSize === `${context.nzSize / 2}px`).toBe(true); + expect(hostStyle.fontSize === `calc(${context.nzSize / 2}px)`).toBe(true); + }); + + it('should be custom unit size', () => { + const size = `8vw`; + context.nzSize = size; + context.nzIcon = null; + context.nzSrc = null; + fixture.detectChanges(); + const hostStyle = dl.nativeElement.querySelector('nz-avatar').style; + expect(hostStyle.height === size).toBe(true); + expect(hostStyle.width === size).toBe(true); + expect(hostStyle.lineHeight === size).toBe(true); + expect(hostStyle.fontSize === ``).toBe(true); + + context.nzIcon = 'user'; + fixture.detectChanges(); + expect(hostStyle.fontSize === `calc(4vw)`).toBe(true); }); }); @@ -172,6 +201,8 @@ describe('avatar', () => { [nzIcon]="nzIcon" [nzText]="nzText" [nzSrc]="nzSrc" + [nzSrcSet]="nzSrcSet" + [nzAlt]="nzAlt" > `, styleUrls: ['./style/index.less'] @@ -185,4 +216,6 @@ class TestAvatarComponent { nzSrc: | string | null = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==`; + nzSrcSet: string; + nzAlt: string; } diff --git a/components/avatar/doc/index.en-US.md b/components/avatar/doc/index.en-US.md index b527c4e286..e7cae321c0 100644 --- a/components/avatar/doc/index.en-US.md +++ b/components/avatar/doc/index.en-US.md @@ -24,4 +24,6 @@ import { NzAvatarModule } from 'ng-zorro-antd'; | `[nzShape]` | the shape of avatar | `'circle'|'square'` | `'circle'` | | `[nzSize]` | the size of the avatar | `'large'|'small'|'default'|number` | `'default'` | | `[nzSrc]` | the address of the image for an image avatar | `string` | - | +| `[nzSrcSet]` | a list of sources to use for different screen resolutions | string | - | +| `[nzAlt]` | This attribute defines the alternative text describing the image | string | - | | `[nzText]` | letter type avatar | `string` | - | diff --git a/components/avatar/doc/index.zh-CN.md b/components/avatar/doc/index.zh-CN.md index 7ec5d586d2..e1d006ae3a 100644 --- a/components/avatar/doc/index.zh-CN.md +++ b/components/avatar/doc/index.zh-CN.md @@ -25,4 +25,6 @@ import { NzAvatarModule } from 'ng-zorro-antd'; | `[nzShape]` | 指定头像的形状 | `'circle'|'square'` | `'circle'` | | `[nzSize]` | 设置头像的大小 | `'large'|'small'|'default'|number` | `'default'` | | `[nzSrc]` | 图片类头像的资源地址 | `string` | - | +| `[nzSrcSet]` | 设置图片类头像响应式资源地址 | string | - | +| `[nzAlt]` | 图像无法显示时的替代文本 | string | - | | `[nzText]` | 文本类头像 | `string` | - | diff --git a/components/avatar/nz-avatar.component.html b/components/avatar/nz-avatar.component.html index ab7135b942..79d77970e7 100644 --- a/components/avatar/nz-avatar.component.html +++ b/components/avatar/nz-avatar.component.html @@ -1,3 +1,3 @@ - + {{ nzText }} \ No newline at end of file diff --git a/components/avatar/nz-avatar.component.ts b/components/avatar/nz-avatar.component.ts index 7250137172..cdc3a0893e 100644 --- a/components/avatar/nz-avatar.component.ts +++ b/components/avatar/nz-avatar.component.ts @@ -43,6 +43,8 @@ export class NzAvatarComponent implements OnChanges { @Input() nzSize: NzAvatarSize = 'default'; @Input() nzText: string; @Input() nzSrc: string; + @Input() nzSrcSet: string; + @Input() nzAlt: string; @Input() nzIcon: string; oldAPIIcon = true; // Make the user defined icon compatible to old API. Should be removed in 2.0. @@ -133,14 +135,12 @@ export class NzAvatarComponent implements OnChanges { } private setSizeStyle(): void { - if (typeof this.nzSize === 'string') { - return; - } - this.renderer.setStyle(this.el, 'width', `${this.nzSize}px`); - this.renderer.setStyle(this.el, 'height', `${this.nzSize}px`); - this.renderer.setStyle(this.el, 'line-height', `${this.nzSize}px`); + const size = typeof this.nzSize === 'string' ? this.nzSize : `${this.nzSize}px`; + this.renderer.setStyle(this.el, 'width', size); + this.renderer.setStyle(this.el, 'height', size); + this.renderer.setStyle(this.el, 'line-height', size); if (this.hasIcon) { - this.renderer.setStyle(this.el, 'font-size', `${this.nzSize / 2}px`); + this.renderer.setStyle(this.el, 'font-size', `calc(${size} / 2)`); } } }