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

* feat(module:badge): support nzTitle * feat(module:badge): support nzTitle and nzOffset property
NG-ZORRO · Aug 13, 2019 · ffb7219 · ffb7219
1 parent 5e71739
commit ffb7219
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 0 deletions.
diff --git a/components/badge/doc/index.en-US.md b/components/badge/doc/index.en-US.md
@@ -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]` | - |
diff --git a/components/badge/doc/index.zh-CN.md b/components/badge/doc/index.zh-CN.md
@@ -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]` | - |
diff --git a/components/badge/nz-badge.component.html b/components/badge/nz-badge.component.html
@@ -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">

diff --git a/components/badge/nz-badge.component.ts b/components/badge/nz-badge.component.ts
@@ -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);

diff --git a/components/badge/nz-badge.spec.ts b/components/badge/nz-badge.spec.ts
@@ -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];
 }