diff --git a/components/dropdown/doc/index.en-US.md b/components/dropdown/doc/index.en-US.md index c1796c22bcd..302ead3e3c0 100755 --- a/components/dropdown/doc/index.en-US.md +++ b/components/dropdown/doc/index.en-US.md @@ -54,6 +54,7 @@ mark the element that trigger 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 | `boolean` | - | +| `[nzIcon]` | icon of right side | `string|TemplateRef` | `'ellipsis'` | | `(nzVisibleChange)` | a callback function takes an argument: `nzVisible`, is executed when the visible state is changed | `EventEmitter` | - | | `(nzClick)` | a callback function which will be executed when you click the button on the left | `EventEmitter` | - | diff --git a/components/dropdown/doc/index.zh-CN.md b/components/dropdown/doc/index.zh-CN.md index 6d4eed1b3bb..f215b271936 100755 --- a/components/dropdown/doc/index.zh-CN.md +++ b/components/dropdown/doc/index.zh-CN.md @@ -55,6 +55,7 @@ import { NzDropDownModule } from 'ng-zorro-antd'; | `[nzTrigger]` | 触发下拉的行为 | `'click'|'hover'` | `'hover'` | | `[nzClickHide]` | 点击后是否隐藏菜单 | `boolean` | `true` | | `[nzVisible]` | 菜单是否显示 | `boolean` | - | +| `[nzIcon]` | 右侧的 icon | `string|TemplateRef` | `'ellipsis'` | | `(nzVisibleChange)` | 菜单显示状态改变时调用,参数为 nzVisible | `EventEmitter` | - | | `(nzClick)` | 点击左侧按钮的回调 | `EventEmitter` | - | diff --git a/components/dropdown/nz-dropdown-button.component.html b/components/dropdown/nz-dropdown-button.component.html index 5caa5fca0e8..f002151b8f9 100644 --- a/components/dropdown/nz-dropdown-button.component.html +++ b/components/dropdown/nz-dropdown-button.component.html @@ -16,7 +16,7 @@ (click)="setVisibleStateWhen(true,'click')" (mouseenter)="setVisibleStateWhen(true,'hover')" (mouseleave)="setVisibleStateWhen(false,'hover')"> - + = 'ellipsis'; @Output() readonly nzClick = new EventEmitter(); @ViewChild(NzDropDownDirective) nzDropDownDirective: NzDropDownDirective; diff --git a/components/dropdown/nz-dropdown.module.ts b/components/dropdown/nz-dropdown.module.ts index ff9c5b5efd7..e7a07ddb7e9 100644 --- a/components/dropdown/nz-dropdown.module.ts +++ b/components/dropdown/nz-dropdown.module.ts @@ -12,7 +12,7 @@ import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { NzButtonModule } from 'ng-zorro-antd/button'; -import { NzNoAnimationModule, NzOverlayModule } from 'ng-zorro-antd/core'; +import { NzAddOnModule, NzNoAnimationModule, NzOverlayModule } from 'ng-zorro-antd/core'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzMenuModule } from 'ng-zorro-antd/menu'; @@ -32,7 +32,8 @@ import { NzDropdownService } from './nz-dropdown.service'; NzMenuModule, NzIconModule, NzNoAnimationModule, - NzOverlayModule + NzOverlayModule, + NzAddOnModule ], entryComponents: [NzDropdownContextComponent], declarations: [ diff --git a/components/dropdown/nz-dropdown.spec.ts b/components/dropdown/nz-dropdown.spec.ts index d0d66254f64..11a3d2378b0 100644 --- a/components/dropdown/nz-dropdown.spec.ts +++ b/components/dropdown/nz-dropdown.spec.ts @@ -282,6 +282,15 @@ describe('dropdown', () => { expect(clickCallback).toHaveBeenCalledTimes(1); expect(clickCallback).toHaveBeenCalledWith(true); }); + it('should icon work', () => { + fixture.detectChanges(); + const rightIcon = button.nativeElement.querySelector('.ant-dropdown-trigger i') as HTMLElement; + expect(rightIcon.classList).toContain('anticon-down'); + testComponent.strIcon = false; + fixture.detectChanges(); + const rightButton = button.nativeElement.querySelector('.ant-dropdown-trigger') as HTMLButtonElement; + expect(rightButton.textContent).toContain('Expand'); + }); it('should disabled work', () => { testComponent.disabled = true; fixture.detectChanges(); @@ -472,6 +481,7 @@ export class NzTestDropdownComponent { [nzPlacement]="placement" [nzDisabled]="disabled" [nzTrigger]="'click'" + [nzIcon]="strIcon ? 'down' : iconTemp" (nzVisibleChange)="visibleChange($event)" > DropDown @@ -487,12 +497,14 @@ export class NzTestDropdownComponent { + Expand `, styles: [] }) export class NzTestDropdownButtonComponent { @ViewChild(NzDropDownButtonComponent) nzDropDownButtonComponent: NzDropDownButtonComponent; @ViewChild(NzSubMenuComponent) nzSubMenuComponent: NzSubMenuComponent; + strIcon = true; disabled = false; visible = false; placement = 'bottomLeft';