feat(module:theme): add the badgeOverflowCount property to Menu (#1891

)
ng-alain · Mar 4, 2025 · 634a138 · 634a138
1 parent ace3a28
commit 634a138
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 1 deletion.
diff --git a/packages/theme/layout-default/layout-nav.component.html b/packages/theme/layout-default/layout-nav.component.html
@@ -62,7 +62,12 @@
         }
         <!-- badge -->
         @if (i.badge) {
-          <nz-badge [nzCount]="i.badge" [nzDot]="i.badgeDot" nzStandalone [nzOverflowCount]="9" />
+          <nz-badge
+            [nzCount]="i.badge"
+            [nzDot]="i.badgeDot"
+            nzStandalone
+            [nzOverflowCount]="i.badgeOverflowCount ? i.badgeOverflowCount : 9"
+          />
         }
         @if (i.children.length > 0) {
           <ul class="sidebar-nav sidebar-nav__sub sidebar-nav__depth{{ i._depth }}">

diff --git a/packages/theme/layout-default/layout-nav.component.spec.ts b/packages/theme/layout-default/layout-nav.component.spec.ts
@@ -350,6 +350,14 @@ describe('theme: layout-default-nav', () => {
           page.showSubMenu();
           expect(page.getEl('.sidebar-nav__floating-container .sidebar-nav__item', true) != null).toBe(true);
         });
+        it('should be working when include badgeOverflowCount', () => {
+          const mockMenu = deepCopy(MOCKMENUS) as Nav[];
+          mockMenu[0].children![0].badge = 100;
+          mockMenu[0].children![0].badgeOverflowCount = 99;
+          menuSrv.add(mockMenu);
+          fixture.detectChanges();
+          expect(page.getEl<HTMLElement>('.ant-badge-count')!.childNodes.item(1).nodeValue == ' 99+ ').toBe(true);
+        });
         it('should be ingore children title trigger event', () => {
           spyOn(context, 'select');
           expect(context.select).not.toHaveBeenCalled();

diff --git a/packages/theme/src/services/menu/index.en-US.md b/packages/theme/src/services/menu/index.en-US.md
@@ -47,6 +47,7 @@ Recursive upward find, for example, the menu data source contains `/ware`, then
 | `badge` | Badget for the menu item when `group` is `true` | `number` | - |
 | `badgeDot` | Whether to display a red dot instead of `badge` value | `boolean` | - |
 | `badgeStatus` | Badge [color](https://ng.ant.design/components/badge/en#nz-badge) | `success,processing,default,error,warning` | `error` |
+| `badgeOverflowCount` | Maximum count to show in badge, show `${badgeOverflowCount}+` when exceed | `number` | - |
 | `open` | Whether open for the menu item | `boolean` | `false` |
 | `disabled` | Whether disable for the menu item | `boolean` | `false` |
 | `hide` | Whether hidden for the menu item | `boolean` | `false` |

diff --git a/packages/theme/src/services/menu/index.zh-CN.md b/packages/theme/src/services/menu/index.zh-CN.md
@@ -45,6 +45,7 @@ type: Service
 | `badge` | 徽标数，展示的数字，指[示例](//ng-alain.github.io/ng-alain/)中的【小部件】后的红色块。（注：`group:true` 时无效） | `number` | - |
 | `badgeDot` | 徽标数，显示小红点 | `boolean` | - |
 | `badgeStatus` | 徽标 Badge [颜色](https://ng.ant.design/components/badge/en#nz-badge) | `success,processing,default,error,warning` | `error` |
+| `badgeOverflowCount` | 徽标数值显示上限，超过显示 `${badgeOverflowCount}+` | `number` | - |
 | `open` | 是否打开菜单 | `boolean` | `false` |
 | `disabled` | 是否禁用菜单 | `boolean` | `false` |
 | `hide` | 是否隐藏菜单 | `boolean` | `false` |

diff --git a/packages/theme/src/services/menu/interface.ts b/packages/theme/src/services/menu/interface.ts
@@ -46,6 +46,8 @@ export interface Menu {
   badgeDot?: boolean;
   /** Badge [color](https://ng.ant.design/components/badge/en#nz-badge) */
   badgeStatus?: 'success' | 'processing' | 'default' | 'error' | 'warning';
+  /** Maximum count to show in badge, show `${badgeOverflowCount}+` when exceed */
+  badgeOverflowCount?: number;
   /** Whether disable for the menu item */
   disabled?: boolean;
   /** Whether hidden for the menu item */