diff --git a/components/avatar/avatar.spec.ts b/components/avatar/avatar.spec.ts
index 3419e478c84..eddafb2b3f4 100644
--- a/components/avatar/avatar.spec.ts
+++ b/components/avatar/avatar.spec.ts
@@ -102,6 +102,24 @@ describe('avatar', () => {
expect(dl.query(By.css(`.ant-avatar-${item.cls}`)) !== null).toBe(true);
});
}
+
+ it('custom size', () => {
+ context.nzSize = 64;
+ context.nzIcon = null;
+ context.nzSrc = null;
+ fixture.detectChanges();
+ const size = `${64}px`;
+ 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 === `${context.nzSize / 2}px`).toBe(true);
+ });
+
});
describe('order: image > icon > text', () => {
@@ -151,7 +169,7 @@ describe('avatar', () => {
class TestAvatarComponent {
@ViewChild('comp') comp: NzAvatarComponent;
nzShape = 'square';
- nzSize = 'large';
+ nzSize: string | number = 'large';
nzIcon = 'anticon anticon-user';
nzText = 'A';
nzSrc = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==`;
diff --git a/components/avatar/demo/badge.ts b/components/avatar/demo/badge.ts
index 47f3e029387..bf3e46aeefd 100644
--- a/components/avatar/demo/badge.ts
+++ b/components/avatar/demo/badge.ts
@@ -4,10 +4,10 @@ import { Component } from '@angular/core';
selector: 'nz-demo-avatar-badge',
template: `
-
+
-
+
`
})
diff --git a/components/avatar/demo/basic.ts b/components/avatar/demo/basic.ts
index 0dc28343095..f34e86c9164 100644
--- a/components/avatar/demo/basic.ts
+++ b/components/avatar/demo/basic.ts
@@ -4,14 +4,16 @@ import { Component } from '@angular/core';
selector: 'nz-demo-avatar-basic',
template: `
-
-
-
+
+
+
+
-
-
-
+
+
+
+
`,
styles: [`
diff --git a/components/avatar/demo/type.ts b/components/avatar/demo/type.ts
index 41f61e29ca9..d3b741b8586 100644
--- a/components/avatar/demo/type.ts
+++ b/components/avatar/demo/type.ts
@@ -3,12 +3,12 @@ import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-avatar-type',
template: `
-
+
-
+
-
+
`,
styles: [`
:host ::ng-deep .ant-avatar {
diff --git a/components/avatar/doc/index.en-US.md b/components/avatar/doc/index.en-US.md
index 7cbffa5b557..92e3c833268 100644
--- a/components/avatar/doc/index.en-US.md
+++ b/components/avatar/doc/index.en-US.md
@@ -14,6 +14,6 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
| -------- | ----------- | ---- | ------- |
| `[nzIcon]` | the `Icon` type for an icon avatar, see `Icon` | string | - |
| `[nzShape]` | the shape of avatar | `circle` ｜ `square` | `circle` |
-| `[nzSize]` | the size of the avatar | `large` ｜ `small` ｜ `default` | `default` |
+| `[nzSize]` | the size of the avatar | `large` ｜ `small` ｜ `default` ｜ number | `default` |
| `[nzSrc]` | the address of the image for an image avatar | 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 3011d5f185c..eedfd7c15e6 100644
--- a/components/avatar/doc/index.zh-CN.md
+++ b/components/avatar/doc/index.zh-CN.md
@@ -15,6 +15,6 @@ title: Avatar
| --- | --- | --- | --- |
| `[nzIcon]` | 设置头像的图标类型，参考 `Icon` | string | - |
| `[nzShape]` | 指定头像的形状 | Enum{ 'circle', 'square' } | `circle` |
-| `[nzSize]` | 设置头像的大小 | Enum{ 'large', 'small', 'default' } | `default` |
+| `[nzSize]` | 设置头像的大小 | Enum{ 'large', 'small', 'default', number } | `default` |
| `[nzSrc]` | 图片类头像的资源地址 | string | - |
| `[nzText]` | 文本类头像 | string | - |
diff --git a/components/avatar/nz-avatar.component.ts b/components/avatar/nz-avatar.component.ts
index 9e2ce0948fc..b3b94429bfa 100644
--- a/components/avatar/nz-avatar.component.ts
+++ b/components/avatar/nz-avatar.component.ts
@@ -1,10 +1,11 @@
import {
+ Attribute,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
Input,
- OnChanges,
+ OnChanges, Renderer2,
SimpleChanges,
ViewChild
} from '@angular/core';
@@ -13,6 +14,7 @@ import { NzUpdateHostClassService } from '../core/services/update-host-class.ser
import { NzSizeLDSType } from '../core/types/size';
export type NzAvatarShape = 'square' | 'circle';
+export type NzAvatarSize = NzSizeLDSType | number;
@Component({
selector : 'nz-avatar',
@@ -44,13 +46,17 @@ export class NzAvatarComponent implements OnChanges {
@Input() nzShape: NzAvatarShape = 'circle';
- @Input() nzSize: NzSizeLDSType = 'default';
+ @Input() nzSize: NzAvatarSize = 'default';
@Input() nzText: string;
@Input() nzSrc: string;
- constructor(private elementRef: ElementRef, private cd: ChangeDetectorRef, private updateHostClassService: NzUpdateHostClassService) {
+ constructor(
+ private elementRef: ElementRef,
+ private cd: ChangeDetectorRef,
+ private updateHostClassService: NzUpdateHostClassService,
+ private renderer: Renderer2) {
}
private el: HTMLElement = this.elementRef.nativeElement;
private prefixCls = 'ant-avatar';
@@ -63,7 +69,7 @@ export class NzAvatarComponent implements OnChanges {
[ `${this.prefixCls}-${this.sizeMap[ this.nzSize ]}` ]: this.sizeMap[ this.nzSize ],
[ `${this.prefixCls}-${this.nzShape}` ] : this.nzShape,
[ `${this.prefixCls}-icon` ] : this.nzIcon,
- [ `${this.prefixCls}-image` ] : this.nzSrc
+ [ `${this.prefixCls}-image` ] : this.hasSrc // downgrade after image error
};
this.updateHostClassService.updateHostClass(this.el, classMap);
this.cd.detectChanges();
@@ -80,6 +86,7 @@ export class NzAvatarComponent implements OnChanges {
this.hasText = true;
}
this.setClass().notifyCalc();
+ this.setSizeStyle();
}
ngOnChanges(changes: SimpleChanges): void {
@@ -88,6 +95,7 @@ export class NzAvatarComponent implements OnChanges {
this.hasSrc = !!this.nzSrc;
this.setClass().notifyCalc();
+ this.setSizeStyle();
}
private calcStringSize(): void {
@@ -118,4 +126,16 @@ export class NzAvatarComponent implements OnChanges {
});
return this;
}
+
+ 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`);
+ if (this.hasIcon) {
+ this.renderer.setStyle(this.el, 'font-size', `${this.nzSize / 2}px`);
+ }
+ }
}