Skip to content
Permalink
Browse files

feat(module:badge): support nzTitle and nzOffset property (#3977)

* feat(module:badge): support nzTitle

* feat(module:badge): support nzTitle and nzOffset property
  • Loading branch information...
hsuanxyz authored and vthinkxie committed Aug 13, 2019
1 parent 5e71739 commit ffb7219f736380a5857c08e0e4d7b4a4576430d7
@@ -42,3 +42,5 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge';
| `[nzShowZero]` | Whether to show badge when `count` is zero | `boolean` | `false` |
| `[nzStatus]` | Set `nz-badge` as a status dot | `'success' \| 'processing' \| 'default' \| 'error' \| 'warning'` | - |
| `[nzText]` | If `nzStatus` is set, `text` sets the display text of the status `dot` | `string` | - |
| `[nzTitle]` | Text to show when hovering over the badge(Only Non-standalone) | `string` | `nzCount` |
| `[nzOffset]` | set offset of the badge dot, like[x, y] (Only Non-standalone) | `[number, number]` | - |
@@ -43,3 +43,5 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge';
| `[nzShowZero]` | 当数值为 0 时,是否展示 Badge | `boolean` | `false` |
| `[nzStatus]` | 设置 `nz-badge` 为状态点 | `'success' \| 'processing' \| 'default' \| 'error' \| 'warning'` | - |
| `[nzText]` | 在设置了 `nzStatus` 的前提下有效,设置状态点的文本 | `string` | - |
| `[nzTitle]` | 设置鼠标放在状态点上时显示的文字(非独立使用时) | `string` | `nzCount` |
| `[nzOffset]` | 设置状态点的位置偏移,格式为 [x, y] (非独立使用时) | `[number, number]` | - |
@@ -10,6 +10,9 @@
[@.disabled]="notWrapper"
[@zoomBadgeMotion]
[ngStyle]="nzStyle"
[attr.title]="nzTitle || nzCount"
[style.right.px]="nzOffset && nzOffset[0] ? -nzOffset[0] : null"
[style.marginTop.px]="nzOffset && nzOffset[1] ? nzOffset[1] : null"
[class.ant-badge-count]="!nzDot"
[class.ant-badge-dot]="nzDot"
[class.ant-badge-multiple-words]="countArray.length>=2">
@@ -73,9 +73,11 @@ export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges, OnDes
@Input() nzOverflowCount = 99;
@Input() nzText: string;
@Input() nzColor: string;
@Input() nzTitle: string;
@Input() nzStyle: { [key: string]: string };
@Input() nzStatus: NzBadgeStatusType;
@Input() nzCount: number | TemplateRef<void>;
@Input() nzOffset: [number, number];

checkContent(): void {
this.notWrapper = isEmpty(this.contentElement.nativeElement);
@@ -47,6 +47,24 @@ describe('badge', () => {
expect(badgeElement.nativeElement.querySelectorAll('.current')[1].innerText).toBe('0');
});

it('should title work', () => {
testComponent.overflow = 99;
testComponent.count = 1000;
fixture.detectChanges();
expect(badgeElement.nativeElement.querySelector('sup').getAttribute('title')).toBe('1000');
testComponent.title = 'test';
fixture.detectChanges();
expect(badgeElement.nativeElement.querySelector('sup').getAttribute('title')).toBe('test');
});

it('should offset work', () => {
testComponent.offset = [10, 10];
fixture.detectChanges();
const style = getComputedStyle(badgeElement.nativeElement.querySelector('sup'));
expect(style.right).toBe('-10px');
expect(style.marginTop).toBe('10px');
});

it('should overflow work', () => {
testComponent.overflow = 4;
fixture.detectChanges();
@@ -130,6 +148,8 @@ describe('badge', () => {
[nzOverflowCount]="overflow"
[nzStyle]="style"
[nzDot]="dot"
[nzOffset]="offset"
[nzTitle]="title"
>
<a *ngIf="inner"></a>
</nz-badge>
@@ -144,4 +164,6 @@ export class NzTestBadgeBasicComponent {
status: string;
style: NgStyleInterface;
text: string;
title: string;
offset: [number, number];
}

0 comments on commit ffb7219

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