diff --git a/components/layout/demo/custom-trigger.ts b/components/layout/demo/custom-trigger.ts index 5d2fb091b10..0c1cd7cb36e 100644 --- a/components/layout/demo/custom-trigger.ts +++ b/components/layout/demo/custom-trigger.ts @@ -4,7 +4,7 @@ import { Component, TemplateRef, ViewChild } from '@angular/core'; selector: 'nz-demo-layout-custom-trigger', template: ` - +
    @@ -71,10 +71,18 @@ import { Component, TemplateRef, ViewChild } from '@angular/core'; export class NzDemoLayoutCustomTriggerComponent { isCollapsed = false; triggerTemplate = null; + zeroTriggerTemplate = null; + collapsedWidth = 80; @ViewChild('trigger') customTrigger: TemplateRef; /** custom trigger can be TemplateRef **/ changeTrigger(): void { this.triggerTemplate = this.customTrigger; } + + /** custom trigger can be TemplateRef **/ + changeZeroWidthTrigger(): void { + this.collapsedWidth = 0; + this.zeroTriggerTemplate = this.customTrigger; + } } diff --git a/components/layout/nz-layout.spec.ts b/components/layout/nz-layout.spec.ts index 655a9cfb8ae..f2b5ff7cae4 100644 --- a/components/layout/nz-layout.spec.ts +++ b/components/layout/nz-layout.spec.ts @@ -173,6 +173,34 @@ describe('layout', () => { expect(trigger).not.toBeNull(); }); }); + + describe('custom-zero-trigger', () => { + let sider; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports : [ NzLayoutModule ], + declarations: [ NzDemoLayoutCustomTriggerComponent ], + providers : [], + schemas : [ NO_ERRORS_SCHEMA ] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NzDemoLayoutCustomTriggerComponent); + testComponent = fixture.debugElement.componentInstance; + sider = fixture.debugElement.query(By.directive(NzSiderComponent)).injector.get(NzSiderComponent); + }); + it('should display custom zero trigger', () => { + testComponent.changeZeroWidthTrigger(); + testComponent.isCollapsed = true; + fixture.detectChanges(); + const trigger = fixture.debugElement.query(By.css('.ant-layout-sider-zero-width-trigger')); + expect(trigger).not.toBeNull(); + expect(trigger.nativeElement.firstElementChild.classList.contains('anticon-up')).toBe(true); + }); + }); + describe('responsive', () => { let sider; diff --git a/components/layout/nz-sider.component.html b/components/layout/nz-sider.component.html index f53bd9eb952..71aa6b4d0d0 100644 --- a/components/layout/nz-sider.component.html +++ b/components/layout/nz-sider.component.html @@ -2,7 +2,7 @@ - +
    @@ -10,4 +10,7 @@ + + + \ No newline at end of file diff --git a/components/layout/nz-sider.component.ts b/components/layout/nz-sider.component.ts index 8fcddbbc4bd..90a7b7f31c8 100644 --- a/components/layout/nz-sider.component.ts +++ b/components/layout/nz-sider.component.ts @@ -32,6 +32,7 @@ export class NzSiderComponent implements OnInit, AfterViewInit { private _collapsed = false; private _collapsible = false; @ViewChild('defaultTrigger') _trigger: TemplateRef; + @ViewChild('defaultZeroTrigger') _zeroTrigger: TemplateRef; private _reverseArrow = false; private below = false; private isInit = false; @@ -65,6 +66,15 @@ export class NzSiderComponent implements OnInit, AfterViewInit { return this._trigger; } + @Input() + set nzZeroTrigger(value: TemplateRef) { + this._zeroTrigger = value; + } + + get nzZeroTrigger(): TemplateRef { + return this._zeroTrigger; + } + @Input() set nzCollapsible(value: boolean) { this._collapsible = toBoolean(value);