diff --git a/components/collapse/demo/custom.md b/components/collapse/demo/custom.md index 6ec48d6a6c..4ffde3319a 100755 --- a/components/collapse/demo/custom.md +++ b/components/collapse/demo/custom.md @@ -7,10 +7,10 @@ title: ## zh-CN -自定义各个面板的背景色、圆角和边距。 +自定义各个面板的背景色、圆角、边距和图标。 ## en-US -Customize the background, border and margin styles for each panel. +Customize the background, border, margin and icon styles for each panel. diff --git a/components/collapse/demo/custom.ts b/components/collapse/demo/custom.ts index b6d5a4ecf7..90a42855d4 100644 --- a/components/collapse/demo/custom.ts +++ b/components/collapse/demo/custom.ts @@ -4,10 +4,13 @@ import { Component } from '@angular/core'; selector: 'nz-demo-collapse-custom', template: ` - +

{{panel.name}} content

+ + +
`, styles : [] @@ -29,6 +32,7 @@ export class NzDemoCollapseCustomComponent { active : false, disabled : true, name : 'This is panel header 2', + icon : 'double-right', customStyle: { 'background' : '#f7f7f7', 'border-radius': '4px', diff --git a/components/collapse/doc/index.en-US.md b/components/collapse/doc/index.en-US.md index 22063cb0ee..bb283458bd 100755 --- a/components/collapse/doc/index.en-US.md +++ b/components/collapse/doc/index.en-US.md @@ -30,3 +30,4 @@ A content area which can be collapsed and expanded. | `[nzShowArrow]` | Display arrow or not | `boolean` | `true` | | `[nzActive]` | Active status of panel, double binding | `boolean` | - | | `(nzActiveChange)` | Callback function of the active status | `EventEmitter` | - | +| `[nzExpandedIcon]` | Customize an icon for toggle | `string|TemplateRef` | - | diff --git a/components/collapse/doc/index.zh-CN.md b/components/collapse/doc/index.zh-CN.md index 62ae031491..5c4e9e56d5 100755 --- a/components/collapse/doc/index.zh-CN.md +++ b/components/collapse/doc/index.zh-CN.md @@ -31,3 +31,4 @@ cols: 1 | `[nzShowArrow]` | 是否展示箭头 | `boolean` | `true` | | `[nzActive]` | 面板是否展开,可双向绑定 | `boolean` | - | | `(nzActiveChange)` | 面板展开回调 | `EventEmitter` | - | +| `[nzExpandedIcon]` | 自定义切换图标 | `string|TemplateRef` | - | \ No newline at end of file diff --git a/components/collapse/nz-collapse-panel.component.html b/components/collapse/nz-collapse-panel.component.html index 11ec77228f..5387a69020 100644 --- a/components/collapse/nz-collapse-panel.component.html +++ b/components/collapse/nz-collapse-panel.component.html @@ -1,5 +1,9 @@
; + @Input() nzExpandedIcon: string | TemplateRef; @Output() readonly nzActiveChange = new EventEmitter(); clickHeader(): void { diff --git a/components/collapse/nz-collapse.spec.ts b/components/collapse/nz-collapse.spec.ts index 1b881e4389..469b38ed6e 100644 --- a/components/collapse/nz-collapse.spec.ts +++ b/components/collapse/nz-collapse.spec.ts @@ -11,7 +11,7 @@ describe('collapse', () => { beforeEach(fakeAsync(() => { TestBed.configureTestingModule({ imports : [ NzCollapseModule, NoopAnimationsModule ], - declarations: [ NzTestCollapseBasicComponent, NzTestCollapseTemplateComponent ] + declarations: [ NzTestCollapseBasicComponent, NzTestCollapseTemplateComponent, NzTestCollapseIconComponent ] }); TestBed.compileComponents(); })); @@ -41,10 +41,10 @@ describe('collapse', () => { }); it('should showArrow work', () => { fixture.detectChanges(); - expect(panels[ 0 ].nativeElement.querySelector('.arrow')).toBeDefined(); + expect(panels[ 0 ].nativeElement.querySelector('.ant-collapse-arrow').firstElementChild).toBeDefined(); testComponent.showArrow = false; fixture.detectChanges(); - expect(panels[ 0 ].nativeElement.querySelector('.arrow')).toBeNull(); + expect(panels[ 0 ].nativeElement.querySelector('.ant-collapse-arrow')).toBeNull(); }); it('should active work', () => { fixture.detectChanges(); @@ -146,6 +146,21 @@ describe('collapse', () => { expect(panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').innerText).toBe('template'); }); }); + describe('collapse icon', () => { + let fixture; + let panels; + beforeEach(() => { + fixture = TestBed.createComponent(NzTestCollapseIconComponent); + fixture.detectChanges(); + panels = fixture.debugElement.queryAll(By.directive(NzCollapsePanelComponent)); + }); + it('should icon work', () => { + fixture.detectChanges(); + expect(panels[ 0 ].nativeElement.querySelector('.anticon-right')).toBeDefined(); + expect(panels[ 1 ].nativeElement.querySelector('.anticon-double-right')).toBeDefined(); + expect(panels[ 2 ].nativeElement.querySelector('.anticon-caret-right')).toBeDefined(); + }); + }); }); @Component({ @@ -169,7 +184,7 @@ export class NzTestCollapseBasicComponent { disabled = false; active01 = false; active02 = false; - showArrow = false; + showArrow = true; header = 'string'; active01Change = jasmine.createSpy('active01 callback'); active02Change = jasmine.createSpy('active02 callback'); @@ -188,3 +203,25 @@ export class NzTestCollapseBasicComponent { }) export class NzTestCollapseTemplateComponent { } + +@Component({ + selector: 'nz-test-collapse-icon', + template: ` + + +

Panel01

+
+ +

Panel02

+
+ +

Panel01

+
+ + + +
+ ` +}) +export class NzTestCollapseIconComponent { +}