diff --git a/components/menu/doc/index.en-US.md b/components/menu/doc/index.en-US.md index 7bd79b3e9e6..8c88e1da3f9 100755 --- a/components/menu/doc/index.en-US.md +++ b/components/menu/doc/index.en-US.md @@ -53,6 +53,7 @@ use `title` to mark the title of submenu | ----- | ----------- | ---- | ------------- | | `[nzOpen]` | whether sub menu is open or not, double binding | `boolean` | `false` | | `[nzDisabled]` | whether sub menu is disabled or not | `boolean` | `false` | +| `[nzMenuClassName]` | Custom the submenu container's class name | `string` | - | | `(nzOpenChange)` | nzOpen callback | `EventEmitter` | - | ### [nz-menu-group] diff --git a/components/menu/doc/index.zh-CN.md b/components/menu/doc/index.zh-CN.md index b92688ac763..ae77e28a5ee 100755 --- a/components/menu/doc/index.zh-CN.md +++ b/components/menu/doc/index.zh-CN.md @@ -54,6 +54,7 @@ subtitle: 导航菜单 | --- | --- | --- | --- | | `[nzOpen]` | 是否展开,可双向绑定 | `boolean` | `false` | | `[nzDisabled]` | 是否禁用 | `boolean` | `false` | +| `[nzMenuClassName]` | 自定义子菜单容器类名 | `string` | - | | `(nzOpenChange)` | 展开回调 | `EventEmitter` | - | diff --git a/components/menu/nz-menu.spec.ts b/components/menu/nz-menu.spec.ts index 4ae825834ea..8c81697160d 100644 --- a/components/menu/nz-menu.spec.ts +++ b/components/menu/nz-menu.spec.ts @@ -402,6 +402,25 @@ describe('menu', () => { fixture.detectChanges(); expect(subs[1].placement).toBe('rightTop'); }); + it('should `nzMenuClassName` work', fakeAsync(() => { + fixture.detectChanges(); + testComponent.open = true; + fixture.detectChanges(); + expect((overlayContainerElement.querySelector('ul.submenu') as HTMLUListElement).classList).toContain( + 'ant-menu-sub' + ); + })); + it('should nested submenu `nzMenuClassName` work', () => { + testComponent.open = true; + fixture.detectChanges(); + const subs = testComponent.subs.toArray(); + subs[1].nzOpen = true; + subs[1].nzSubmenuService.open$.next(true); + fixture.detectChanges(); + expect((overlayContainerElement.querySelector('ul.nested-submenu') as HTMLUListElement).classList).toContain( + 'ant-menu-sub' + ); + }); }); describe('inline submenu', () => { let fixture: ComponentFixture; @@ -423,6 +442,17 @@ describe('menu', () => { expect(ul.style.height).not.toBe('0px'); expect(submenu.nativeElement.classList.contains('ant-menu-submenu-open')).toBe(true); })); + it('should `nzMenuClassName` work', fakeAsync(() => { + fixture.detectChanges(); + expect(submenu.nativeElement.querySelector('.ant-menu-sub').className).toContain('submenu'); + })); + it('should `nzMenuClassName` multi class names work', fakeAsync(() => { + fixture.detectChanges(); + testComponent.submenuClassName = 'submenu submenu-1'; + fixture.detectChanges(); + expect(submenu.nativeElement.querySelector('.ant-menu-sub').className).toContain('submenu'); + expect(submenu.nativeElement.querySelector('.ant-menu-sub').className).toContain('submenu-1'); + })); it('should disabled work', fakeAsync(() => { testComponent.disabled = true; fixture.detectChanges(); @@ -448,7 +478,7 @@ describe('menu', () => { selector: 'nz-test-menu-horizontal', template: `
    -
  • +
  • Navigation Three - Submenu
    • @@ -463,7 +493,7 @@ describe('menu', () => {
      • Option 3
      • Option 4
      • -
      • +
      • Sub Menu
        • Option 5
        • @@ -497,7 +527,7 @@ export class NzTestMenuHorizontalComponent { selector: 'nz-test-menu-inline', template: `
            -
          • +
          • Navigation One
            • Option 1
            • @@ -511,6 +541,7 @@ export class NzTestMenuHorizontalComponent { export class NzTestMenuInlineComponent { disabled = false; collapse = false; + submenuClassName = 'submenu'; @ViewChild(NzSubMenuComponent) subsmenu: NzSubMenuComponent; @ViewChild('menuitem', { read: ElementRef }) menuitem: ElementRef; } diff --git a/components/menu/nz-submenu.component.html b/components/menu/nz-submenu.component.html index 1c1444a6d41..5049a081aba 100644 --- a/components/menu/nz-submenu.component.html +++ b/components/menu/nz-submenu.component.html @@ -12,7 +12,11 @@ -
                +
                + [class.ant-menu-sub]="!nzMenuService.isInDropDown" + [ngClass]="nzMenuClassName">
              diff --git a/components/menu/nz-submenu.component.ts b/components/menu/nz-submenu.component.ts index 8d3425962cf..389b54aedd5 100644 --- a/components/menu/nz-submenu.component.ts +++ b/components/menu/nz-submenu.component.ts @@ -61,22 +61,26 @@ import { NzSubmenuService } from './nz-submenu.service'; ] }) export class NzSubMenuComponent implements OnInit, OnDestroy, AfterContentInit, OnChanges { + @Input() nzMenuClassName: string; + @Input() nzPaddingLeft: number; + @Input() @InputBoolean() nzOpen = false; + @Input() @InputBoolean() nzDisabled = false; + @Output() readonly nzOpenChange: EventEmitter = new EventEmitter(); + + @ViewChild(CdkConnectedOverlay) cdkConnectedOverlay: CdkConnectedOverlay; + @ViewChild(CdkOverlayOrigin, { read: ElementRef }) cdkOverlayOrigin: ElementRef; + @ContentChildren(NzSubMenuComponent, { descendants: true }) + listOfNzSubMenuComponent: QueryList; + @ContentChildren(NzMenuItemDirective, { descendants: true }) + listOfNzMenuItemDirective: QueryList; + placement = 'rightTop'; triggerWidth: number; expandState = 'collapsed'; overlayPositions = [...DEFAULT_SUBMENU_POSITIONS]; + private destroy$ = new Subject(); private isChildMenuSelected = false; - @ContentChildren(NzSubMenuComponent, { descendants: true }) listOfNzSubMenuComponent: QueryList; - @ContentChildren(NzMenuItemDirective, { descendants: true }) listOfNzMenuItemDirective: QueryList< - NzMenuItemDirective - >; - @ViewChild(CdkConnectedOverlay) cdkConnectedOverlay: CdkConnectedOverlay; - @ViewChild(CdkOverlayOrigin, { read: ElementRef }) cdkOverlayOrigin: ElementRef; - @Input() nzPaddingLeft: number; - @Input() @InputBoolean() nzOpen = false; - @Input() @InputBoolean() nzDisabled = false; - @Output() readonly nzOpenChange: EventEmitter = new EventEmitter(); setOpenState(open: boolean): void { this.nzSubmenuService.setOpenState(open);