diff --git a/components/dropdown/doc/index.en-US.md b/components/dropdown/doc/index.en-US.md index 3dba992c636..dc4bdefca09 100755 --- a/components/dropdown/doc/index.en-US.md +++ b/components/dropdown/doc/index.en-US.md @@ -30,6 +30,7 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; | `[nzTrigger]` | the trigger mode which executes the drop-down action | `'click' \| 'hover'` | `'hover'` | | `[nzClickHide]` | whether hide menu when click | `boolean` | `true` | | `[nzVisible]` | whether the dropdown menu is visible, double binding | `boolean` | - | +| `[nzBackdrop]` | whether the dropdown has a backdrop when `nzTrigger` is `click` | `boolean` | `true` | | `[nzOverlayClassName]` | Class name of the dropdown root element | `string` | - | | `[nzOverlayStyle]` | Style of the dropdown root element | `object` | - | | `(nzVisibleChange)` | a callback function takes an argument: `nzVisible`, is executed when the visible state is changed | `EventEmitter` | - | diff --git a/components/dropdown/doc/index.zh-CN.md b/components/dropdown/doc/index.zh-CN.md index 21890a4ab90..715a125e576 100755 --- a/components/dropdown/doc/index.zh-CN.md +++ b/components/dropdown/doc/index.zh-CN.md @@ -31,6 +31,7 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; | `[nzTrigger]` | 触发下拉的行为 | `'click' \| 'hover'` | `'hover'` | | `[nzClickHide]` | 点击后是否隐藏菜单 | `boolean` | `true` | | `[nzVisible]` | 菜单是否显示,可双向绑定 | `boolean` | - | +| `[nzBackdrop]` | 是否在 `nzTrigger` 为 `click`时增加背景蒙版 | `boolean` | `true` | | `[nzOverlayClassName]` | 下拉根元素的类名称 | `string` | - | | `[nzOverlayStyle]` | 下拉根元素的样式 | `object` | - | | `(nzVisibleChange)` | 菜单显示状态改变时调用,参数为 nzVisible | `EventEmitter` | - | diff --git a/components/dropdown/nz-dropdown.directive.spec.ts b/components/dropdown/nz-dropdown.directive.spec.ts index 0afb7ca3924..519ce595b74 100644 --- a/components/dropdown/nz-dropdown.directive.spec.ts +++ b/components/dropdown/nz-dropdown.directive.spec.ts @@ -95,6 +95,23 @@ describe('dropdown', () => { ); }).not.toThrowError(); })); + it('should backdrop be disabled', fakeAsync(() => { + const fixture = createComponent(NzTestDropdownComponent, [], []); + fixture.componentInstance.trigger = 'click'; + fixture.componentInstance.backdrop = false; + fixture.detectChanges(); + + expect(() => { + const dropdownElement = fixture.debugElement.query(By.directive(NzDropDownDirective)).nativeElement; + dispatchFakeEvent(dropdownElement, 'mouseenter'); + fixture.detectChanges(); + tick(1000); + fixture.detectChanges(); + + const backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop'); + expect(backdrop).toBeNull(); + }).not.toThrowError(); + })); it('should nzOverlayClassName and nzOverlayStyle work', fakeAsync(() => { const fixture = createComponent(NzTestDropdownComponent, [], []); fixture.detectChanges(); @@ -152,6 +169,7 @@ describe('dropdown', () => { [nzTrigger]="trigger" [nzDisabled]="disabled" [nzPlacement]="placement" + [nzBackdrop]="backdrop" [nzOverlayClassName]="className" [nzOverlayStyle]="overlayStyle" >Trigger @@ -166,6 +184,7 @@ describe('dropdown', () => { ` }) export class NzTestDropdownComponent { + backdrop = true; trigger = 'hover'; placement = 'bottomLeft'; disabled = false; diff --git a/components/dropdown/nz-dropdown.directive.ts b/components/dropdown/nz-dropdown.directive.ts index b4163911f1c..9cf2603a3a2 100644 --- a/components/dropdown/nz-dropdown.directive.ts +++ b/components/dropdown/nz-dropdown.directive.ts @@ -60,6 +60,7 @@ export class NzDropDownDirective implements AfterViewInit, OnDestroy, OnChanges @Input() nzDropdownMenu: NzDropdownMenuComponent; @Input() nzTrigger: 'click' | 'hover' = 'hover'; @Input() nzMatchWidthElement: ElementRef; + @Input() @InputBoolean() nzBackdrop = true; @Input() @InputBoolean() nzClickHide = true; @Input() @InputBoolean() nzDisabled = false; @Input() @InputBoolean() nzVisible = false; @@ -89,7 +90,7 @@ export class NzDropDownDirective implements AfterViewInit, OnDestroy, OnChanges .flexibleConnectedTo(this.el) .withLockedPosition(), minWidth: this.triggerWidth, - hasBackdrop: this.nzTrigger === 'click', + hasBackdrop: this.nzBackdrop && this.nzTrigger === 'click', scrollStrategy: this.overlay.scrollStrategies.reposition() }); }