diff --git a/components/breadcrumb/demo/dropdown.md b/components/breadcrumb/demo/dropdown.md new file mode 100644 index 0000000000..90962d41d8 --- /dev/null +++ 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 new file mode 100644 index 0000000000..ea8a5dd5f8 --- /dev/null +++ b/components/breadcrumb/demo/dropdown.ts @@ -0,0 +1,30 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-breadcrumb-dropdown', + template: ` + + + Ant Design + + + Component + + + An Application + + + Button + + + + + + `, + styles: [] +}) +export class NzDemoBreadcrumbDropdownComponent {} diff --git a/components/breadcrumb/nz-breadcrumb-item.component.html b/components/breadcrumb/nz-breadcrumb-item.component.html index f86c9a73ab..488280a3bb 100644 --- a/components/breadcrumb/nz-breadcrumb-item.component.html +++ b/components/breadcrumb/nz-breadcrumb-item.component.html @@ -1,6 +1,16 @@ - - - + + + + + + + + + + + + + {{ nzBreadCrumbComponent.nzSeparator }} diff --git a/components/breadcrumb/nz-breadcrumb-item.component.ts b/components/breadcrumb/nz-breadcrumb-item.component.ts index f0b00f5160..86ca716b9c 100755 --- 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 index cee32f9793..84ce5eec63 100644 --- 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 index dc32f8c854..4dcf4ac274 100644 --- 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; + 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; let items: DebugElement[];