diff --git a/components/avatar/avatar.spec.ts b/components/avatar/avatar.spec.ts
index 7000d2d2dd4..071e209a339 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 b527c4e2861..e7cae321c01 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 7ec5d586d23..e1d006ae3ab 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 ab7135b9424..79d77970e7a 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 7250137172c..cdc3a0893ea 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)`);
}
}
}