feat(module:breadcrumb): support dropdown (#3636)

* feat(module:breadcrumb): support dropdown * feat: change API * docs: fix demo
NG-ZORRO · Jun 25, 2019 · 9dfab45 · 9dfab45
1 parent 31e674d
commit 9dfab45
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 8 deletions.
diff --git a/components/breadcrumb/demo/dropdown.md b/components/breadcrumb/demo/dropdown.md
@@ -0,0 +1,15 @@
+---
+order: 5
+title: 
+  zh-CN: 带下拉菜单的面包屑
+  en-US: Bread crumbs with drop down menu
+---
+
+## zh-CN
+
+面包屑支持下拉菜单。
+
+## en-US
+
+Breadcrumbs support drop down menu.
+
diff --git a/components/breadcrumb/demo/dropdown.ts b/components/breadcrumb/demo/dropdown.ts
@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-breadcrumb-dropdown',
+  template: `
+    <nz-breadcrumb>
+      <nz-breadcrumb-item>
+        Ant Design
+      </nz-breadcrumb-item>
+      <nz-breadcrumb-item>
+        <a>Component</a>
+      </nz-breadcrumb-item>
+      <nz-breadcrumb-item [nzOverlay]="menu">
+        <a href>An Application</a>
+      </nz-breadcrumb-item>
+      <nz-breadcrumb-item>
+        Button
+      </nz-breadcrumb-item>
+    </nz-breadcrumb>
+    <nz-dropdown-menu #menu="nzDropdownMenu">
+      <ul nz-menu nzSelectable>
+        <li nz-menu-item><a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">General</a></li>
+        <li nz-menu-item><a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">Layout</a></li>
+        <li nz-menu-item><a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">Navigation</a></li>
+      </ul>
+    </nz-dropdown-menu>
+  `,
+  styles: []
+})
+export class NzDemoBreadcrumbDropdownComponent {}
diff --git a/components/breadcrumb/nz-breadcrumb-item.component.html b/components/breadcrumb/nz-breadcrumb-item.component.html
@@ -1,6 +1,16 @@
-<span class="ant-breadcrumb-link">
-  <ng-content></ng-content>
-</span>
+<ng-container *ngIf="!!nzOverlay; else noMenuTpl">
+  <span class="ant-breadcrumb-overlay-link" nz-dropdown [nzDropdownMenu]="nzOverlay">
+    <ng-template [ngTemplateOutlet]="noMenuTpl"></ng-template>
+    <i *ngIf="!!nzOverlay" nz-icon nzType="down"></i>
+  </span>
+</ng-container>
+
+<ng-template #noMenuTpl>
+  <span class="ant-breadcrumb-link">
+    <ng-content></ng-content>
+  </span>
+</ng-template>
+
 <span class="ant-breadcrumb-separator">
   <ng-container *nzStringTemplateOutlet="nzBreadCrumbComponent.nzSeparator">
     {{ nzBreadCrumbComponent.nzSeparator }}

diff --git a/components/breadcrumb/nz-breadcrumb-item.component.ts b/components/breadcrumb/nz-breadcrumb-item.component.ts
@@ -6,7 +6,9 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+
+import { NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
 
 import { NzBreadCrumbComponent } from './nz-breadcrumb.component';
 
@@ -16,7 +18,7 @@ import { NzBreadCrumbComponent } from './nz-breadcrumb.component';
   selector: 'nz-breadcrumb-item',
   exportAs: 'nzBreadcrumbItem',
   preserveWhitespaces: false,
-  templateUrl: 'nz-breadcrumb-item.component.html',
+  templateUrl: './nz-breadcrumb-item.component.html',
   styles: [
     `
       nz-breadcrumb-item:last-child {
@@ -30,5 +32,10 @@ import { NzBreadCrumbComponent } from './nz-breadcrumb.component';
   ]
 })
 export class NzBreadCrumbItemComponent {
+  /**
+   * Dropdown content of a breadcrumb item.
+   */
+  @Input() nzOverlay?: NzDropdownMenuComponent;
+
   constructor(public nzBreadCrumbComponent: NzBreadCrumbComponent) {}
 }
diff --git a/components/breadcrumb/nz-breadcrumb.module.ts b/components/breadcrumb/nz-breadcrumb.module.ts
@@ -6,16 +6,19 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { NzAddOnModule } from 'ng-zorro-antd/core';
+import { NzAddOnModule, NzOverlayModule } from 'ng-zorro-antd/core';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 
 import { NzBreadCrumbItemComponent } from './nz-breadcrumb-item.component';
 import { NzBreadCrumbComponent } from './nz-breadcrumb.component';
 
 @NgModule({
-  imports: [CommonModule, NzAddOnModule],
+  imports: [CommonModule, NzAddOnModule, OverlayModule, NzOverlayModule, NzDropDownModule, NzIconModule],
   declarations: [NzBreadCrumbComponent, NzBreadCrumbItemComponent],
   exports: [NzBreadCrumbComponent, NzBreadCrumbItemComponent]
 })

diff --git a/components/breadcrumb/nz-breadcrumb.spec.ts b/components/breadcrumb/nz-breadcrumb.spec.ts
@@ -5,7 +5,8 @@ import { By } from '@angular/platform-browser';
 import { Router, Routes } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
-// import { dispatchMouseEvent } from 'ng-zorro-antd/core';
+import { NzDemoBreadcrumbDropdownComponent } from 'ng-zorro-antd/breadcrumb/demo/dropdown';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 
 import { NzDemoBreadcrumbBasicComponent } from './demo/basic';
@@ -46,6 +47,31 @@ describe('breadcrumb', () => {
     });
   });
 
+  describe('dropdown', () => {
+    let fixture: ComponentFixture<NzDemoBreadcrumbDropdownComponent>;
+    let items: DebugElement[];
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [NzBreadCrumbModule, NzDropDownModule],
+        declarations: [NzDemoBreadcrumbDropdownComponent],
+        providers: []
+      }).compileComponents();
+    }));
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NzDemoBreadcrumbDropdownComponent);
+      items = fixture.debugElement.queryAll(By.directive(NzBreadCrumbItemComponent));
+    });
+
+    it('should dropdown work', () => {
+      fixture.detectChanges();
+
+      const dropdownElement = items[2];
+      expect((dropdownElement.nativeElement as HTMLElement).querySelector('.ant-dropdown-trigger')).not.toBe(null);
+    });
+  });
+
   describe('separator', () => {
     let fixture: ComponentFixture<NzDemoBreadcrumbSeparatorComponent>;
     let items: DebugElement[];