diff --git a/components/badge/doc/index.en-US.md b/components/badge/doc/index.en-US.md index 2ce494b7a80..850676eada4 100644 --- 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 index 50f40b55988..1ff52fe4526 100644 --- 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 index 32c16a3c874..5b3980b68f5 100644 --- 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 index 7116190bac9..27a48327bf8 100644 --- 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; + @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 index 12fde9c6cc0..cfd2ce8f89c 100644 --- 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" > @@ -144,4 +164,6 @@ export class NzTestBadgeBasicComponent { status: string; style: NgStyleInterface; text: string; + title: string; + offset: [number, number]; }