feat(module:badge): support size (#7405)

NG-ZORRO · Jul 11, 2022 · f40dd38 · f40dd38
1 parent 1e9c11e
commit f40dd38
Show file tree

Hide file tree

Showing 13 changed files with 156 additions and 15 deletions.
diff --git a/components/badge/badge-sup.component.ts b/components/badge/badge-sup.component.ts
@@ -15,7 +15,7 @@ import {
 } from '@angular/core';
 
 import { zoomBadgeMotion } from 'ng-zorro-antd/core/animation';
-import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { NzSafeAny, NzSizeDSType } from 'ng-zorro-antd/core/types';
 
 @Component({
   selector: 'nz-badge-sup',
@@ -54,6 +54,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
     '[style.right.px]': `nzOffset && nzOffset[0] ? -nzOffset[0] : null`,
     '[style.margin-top.px]': `nzOffset && nzOffset[1] ? nzOffset[1] : null`,
     '[class.ant-badge-count]': `!nzDot`,
+    '[class.ant-badge-count-sm]': `nzSize === 'small'`,
     '[class.ant-badge-dot]': `nzDot`,
     '[class.ant-badge-multiple-words]': `countArray.length >= 2`
   }
@@ -67,6 +68,7 @@ export class NzBadgeSupComponent implements OnInit, OnChanges {
   @Input() disableAnimation = false;
   @Input() nzCount?: number | TemplateRef<NzSafeAny>;
   @Input() noAnimation = false;
+  @Input() nzSize: NzSizeDSType = 'default';
   maxNumberArray: string[] = [];
   countArray: number[] = [];
   count: number = 0;

diff --git a/components/badge/badge.component.ts b/components/badge/badge.component.ts
@@ -26,7 +26,7 @@ import { takeUntil } from 'rxjs/operators';
 import { zoomBadgeMotion } from 'ng-zorro-antd/core/animation';
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
-import { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types';
+import { BooleanInput, NzSafeAny, NzSizeDSType } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 
 import { badgePresetColors } from './preset-colors';
@@ -57,6 +57,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'badge';
       <nz-badge-sup
         *ngIf="showSup"
         [nzOffset]="nzOffset"
+        [nzSize]="nzSize"
         [nzTitle]="nzTitle"
         [nzStyle]="nzStyle"
         [nzDot]="nzDot"
@@ -95,6 +96,7 @@ export class NzBadgeComponent implements OnChanges, OnDestroy, OnInit {
   @Input() nzStatus?: NzBadgeStatusType | string;
   @Input() nzCount?: number | TemplateRef<NzSafeAny>;
   @Input() nzOffset?: [number, number];
+  @Input() nzSize: NzSizeDSType = 'default';
 
   constructor(
     public nzConfigService: NzConfigService,

diff --git a/components/badge/badge.spec.ts b/components/badge/badge.spec.ts
@@ -5,7 +5,7 @@ import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
-import { NgStyleInterface } from 'ng-zorro-antd/core/types';
+import { NgStyleInterface, NzSizeDSType } from 'ng-zorro-antd/core/types';
 
 import { NzBadgeComponent } from './badge.component';
 import { NzBadgeModule } from './badge.module';
@@ -155,6 +155,14 @@ describe('badge', () => {
       fixture.detectChanges();
       expect(badgeElement.nativeElement.querySelector('.ant-badge-status-text').innerText).toBe('test');
     });
+
+    it('should size work', () => {
+      fixture.detectChanges();
+      expect(badgeElement.nativeElement.querySelector('nz-badge-sup').classList).toContain('ant-badge-count');
+      testComponent.size = 'small';
+      fixture.detectChanges();
+      expect(badgeElement.nativeElement.querySelector('nz-badge-sup').classList).toContain('ant-badge-count-sm');
+    });
   });
 
   describe('RTL', () => {
@@ -194,6 +202,7 @@ describe('badge', () => {
       [nzOffset]="offset"
       [nzTitle]="title"
       [nzStandalone]="!inner"
+      [nzSize]="size"
     >
       <a *ngIf="inner"></a>
     </nz-badge>
@@ -210,6 +219,7 @@ export class NzTestBadgeBasicComponent {
   text!: string;
   title?: string | null;
   offset?: [number, number];
+  size?: NzSizeDSType = 'default';
   noAnimation = true;
 }
 

diff --git a/components/badge/demo/module b/components/badge/demo/module
@@ -3,5 +3,6 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzSwitchModule } from 'ng-zorro-antd/switch';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
 
-export const moduleList = [ NzBadgeModule, NzButtonModule, NzSwitchModule, NzIconModule, NzCardModule ];
+export const moduleList = [NzBadgeModule, NzButtonModule, NzSwitchModule, NzIconModule, NzCardModule, NzSpaceModule];
diff --git a/components/badge/demo/no-wrapper.ts b/components/badge/demo/no-wrapper.ts
@@ -3,13 +3,22 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-badge-no-wrapper',
   template: `
-    <nz-badge nzStandalone [nzCount]="25"></nz-badge>
-    <nz-badge
-      nzStandalone
-      [nzCount]="4"
-      [nzStyle]="{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }"
-    ></nz-badge>
-    <nz-badge nzStandalone [nzCount]="109" [nzStyle]="{ backgroundColor: '#52c41a' }"></nz-badge>
+    <nz-space>
+      <nz-switch [(ngModel)]="show"></nz-switch>
+      <nz-badge nzStandalone [nzCount]="show ? 25 : 0"></nz-badge>
+      <nz-badge
+        nzStandalone
+        [nzCount]="show ? 4 : 0"
+        [nzStyle]="{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }"
+      ></nz-badge>
+      <nz-badge [nzCount]="show ? iconTemplate : 0" nzStandalone>
+        <a class="head-example"></a>
+      </nz-badge>
+      <ng-template #iconTemplate>
+        <i nz-icon nzType="clock-circle" class="ant-scroll-number-custom-component" style="color: #f5222d"></i>
+      </ng-template>
+      <nz-badge nzStandalone [nzCount]="show ? 109 : 0" [nzStyle]="{ backgroundColor: '#52c41a' }"></nz-badge>
+    </nz-space>
   `,
   styles: [
     `
@@ -19,4 +28,6 @@ import { Component } from '@angular/core';
     `
   ]
 })
-export class NzDemoBadgeNoWrapperComponent {}
+export class NzDemoBadgeNoWrapperComponent {
+  show = true;
+}
diff --git a/components/badge/demo/offset.md b/components/badge/demo/offset.md
@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+  zh-CN: 自定义位置偏移
+  en-US: Offset
+---
+
+## zh-CN
+
+设置状态点的位置偏移，格式为 `[left, top]`，表示状态点距默认位置左侧、上方的偏移量。
+
+## en-US
+
+Set offset of the badge dot, the format is `[left, top]`, which represents the offset of the status dot from the left and top of the default position.
diff --git a/components/badge/demo/offset.ts b/components/badge/demo/offset.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-badge-offset',
+  template: `
+    <a>
+      <nz-badge [nzCount]="5" [nzOffset]="[10, 10]">
+        <a class="head-example"></a>
+      </nz-badge>
+    </a>
+  `,
+  styles: [
+    `
+      .head-example {
+        width: 42px;
+        height: 42px;
+        border-radius: 4px;
+        background: #eee;
+        display: inline-block;
+        vertical-align: middle;
+      }
+    `
+  ]
+})
+export class NzDemoBadgeOffsetComponent {}
diff --git a/components/badge/demo/ribbon.ts b/components/badge/demo/ribbon.ts
@@ -3,8 +3,36 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-badge-ribbon',
   template: `
-    <nz-ribbon nzText="Pushes open the window">
-      <nz-card>And raises the spyglass.</nz-card>
+    <nz-ribbon nzText="Hippies">
+      <nz-card nzTitle="Pushes open the window" nzSize="small"> And raises the spyglass. </nz-card>
+    </nz-ribbon>
+    <br />
+    <nz-ribbon nzText="Hippies" nzColor="pink">
+      <nz-card nzTitle="Pushes open the window" nzSize="small"> And raises the spyglass. </nz-card>
+    </nz-ribbon>
+    <br />
+    <nz-ribbon nzText="Hippies" nzColor="red">
+      <nz-card nzTitle="Pushes open the window" nzSize="small"> And raises the spyglass. </nz-card>
+    </nz-ribbon>
+    <br />
+    <nz-ribbon nzText="Hippies" nzColor="cyan">
+      <nz-card nzTitle="Pushes open the window" nzSize="small"> And raises the spyglass. </nz-card>
+    </nz-ribbon>
+    <br />
+    <nz-ribbon nzText="Hippies" nzColor="green">
+      <nz-card nzTitle="Pushes open the window" nzSize="small"> And raises the spyglass. </nz-card>
+    </nz-ribbon>
+    <br />
+    <nz-ribbon nzText="Hippies" nzColor="purple">
+      <nz-card nzTitle="Pushes open the window" nzSize="small"> And raises the spyglass. </nz-card>
+    </nz-ribbon>
+    <br />
+    <nz-ribbon nzText="Hippies" nzColor="volcano">
+      <nz-card nzTitle="Pushes open the window" nzSize="small"> And raises the spyglass. </nz-card>
+    </nz-ribbon>
+    <br />
+    <nz-ribbon nzText="Hippies" nzColor="magenta">
+      <nz-card nzTitle="Pushes open the window" nzSize="small"> And raises the spyglass. </nz-card>
     </nz-ribbon>
   `
 })

diff --git a/components/badge/demo/size.md b/components/badge/demo/size.md
@@ -0,0 +1,14 @@
+---
+order: 7
+title:
+  zh-CN: 大小
+  en-US: Size
+---
+
+## zh-CN
+
+可以设置有数字徽标的大小。
+
+## en-US
+
+Set size of numeral Badge.
diff --git a/components/badge/demo/size.ts b/components/badge/demo/size.ts
@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-badge-size',
+  template: `
+    <nz-badge nzSize="default" [nzCount]="5">
+      <a class="head-example"></a>
+    </nz-badge>
+    <nz-badge nzSize="small" [nzCount]="5">
+      <a class="head-example"></a>
+    </nz-badge>
+  `,
+  styles: [
+    `
+      nz-badge {
+        margin-right: 20px;
+      }
+
+      .head-example {
+        width: 42px;
+        height: 42px;
+        border-radius: 4px;
+        background: #eee;
+        display: inline-block;
+        vertical-align: middle;
+      }
+    `
+  ]
+})
+export class NzDemoBadgeSizeComponent {}
diff --git a/components/badge/doc/index.en-US.md b/components/badge/doc/index.en-US.md
@@ -38,6 +38,7 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge';
 | `[nzShowDot]` | Whether to display the red dot | `boolean` | `true` |
 | `[nzOverflowCount]` | Max count to show | `number` | `99` | ✅ |
 | `[nzShowZero]` | Whether to show badge when `count` is zero | `boolean` | `false` |
+| `[nzSize]` | If `nzCount` is set, `size` sets the size of badge | `default \| small` | `default`
 | `[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 \| TemplateRef<void>` | - |
 | `[nzTitle]` | Text to show when hovering over the badge（Only Non-standalone), hide when value is `null` | `string \| null` | `nzCount` |

diff --git a/components/badge/doc/index.zh-CN.md b/components/badge/doc/index.zh-CN.md
@@ -39,6 +39,7 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge';
 | `[nzShowDot]` | 是否展示小红点 | `boolean` | `true` |
 | `[nzOverflowCount]` | 展示封顶的数字值 | `number` | `99` | ✅ |
 | `[nzShowZero]` | 当数值为 0 时，是否展示 Badge | `boolean` | `false` |
+| `[nzSize]` | 在设置了 `nzCount` 的前提下有效，设置小圆点的大小 | `default \| small` | `default`
 | `[nzStatus]` | 设置 `nz-badge` 为状态点 | `'success' \| 'processing' \| 'default' \| 'error' \| 'warning'` | - |
 | `[nzText]` | 在设置了 `nzStatus` 的前提下有效，设置状态点的文本 | `string \| TemplateRef<void>` | - |
 | `[nzTitle]` | 设置鼠标放在状态点上时显示的文字（非独立使用时), 为 `null` 时隐藏 | `string \| null` | `nzCount` |

diff --git a/components/badge/ribbon.component.ts b/components/badge/ribbon.component.ts
@@ -30,7 +30,9 @@ import { badgePresetColors } from './preset-colors';
       [class.ant-ribbon-placement-start]="nzPlacement === 'start'"
       [style.background-color]="!presetColor && nzColor"
     >
-      <ng-container *nzStringTemplateOutlet="nzText">{{ nzText }}</ng-container>
+      <ng-container *nzStringTemplateOutlet="nzText">
+        <span class="ant-ribbon-text">{{ nzText }}</span>
+      </ng-container>
       <div class="ant-ribbon-corner" [style.color]="!presetColor && nzColor"></div>
     </div>
   `,