feat(module:dropdown): support customize icons (#3517)

NG-ZORRO · Jun 5, 2019 · 4329b51 · 4329b51
1 parent 2928f84
commit 4329b51
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 3 deletions.
diff --git 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<void>` | `'ellipsis'` |
 | `(nzVisibleChange)` | a callback function takes an argument: `nzVisible`, is executed when the visible state is changed | `EventEmitter<boolean>` | - |
 | `(nzClick)` | a callback function which will be executed when you click the button on the left | `EventEmitter<MouseEvent>` | - |
 

diff --git 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<void>` | `'ellipsis'` |
 | `(nzVisibleChange)` | 菜单显示状态改变时调用，参数为 nzVisible | `EventEmitter<boolean>` | - |
 | `(nzClick)` | 点击左侧按钮的回调 | `EventEmitter<MouseEvent>` | - |
 

diff --git 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')">
-    <i nz-icon type="ellipsis"></i>
+    <ng-container *nzStringTemplateOutlet="nzIcon"><i nz-icon [type]="nzIcon"></i></ng-container>
   </button>
 </div>
 <ng-template

diff --git a/components/dropdown/nz-dropdown-button.component.ts b/components/dropdown/nz-dropdown-button.component.ts
@@ -20,6 +20,7 @@ import {
   Optional,
   Output,
   Self,
+  TemplateRef,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
@@ -67,6 +68,7 @@ import { NzMenuDropdownService } from './nz-menu-dropdown.service';
 export class NzDropDownButtonComponent extends NzDropDownComponent implements OnDestroy, AfterContentInit, OnChanges {
   @Input() nzSize = 'default';
   @Input() nzType = 'default';
+  @Input() nzIcon: string | TemplateRef<void> = 'ellipsis';
   @Output() readonly nzClick = new EventEmitter<MouseEvent>();
   @ViewChild(NzDropDownDirective) nzDropDownDirective: NzDropDownDirective;
 

diff --git 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
@@ -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 {
         </li>
       </ul>
     </nz-dropdown-button>
+    <ng-template #iconTemp>Expand</ng-template>
   `,
   styles: []
 })
 export class NzTestDropdownButtonComponent {
   @ViewChild(NzDropDownButtonComponent) nzDropDownButtonComponent: NzDropDownButtonComponent;
   @ViewChild(NzSubMenuComponent) nzSubMenuComponent: NzSubMenuComponent;
+  strIcon = true;
   disabled = false;
   visible = false;
   placement = 'bottomLeft';