feat(module:collapse): support custom icon (#2783)

* feat(module:collapse): support custom icon * feat(module:collapse): support custom icon * feat(module:collapse): support custom icon * feat(module:collapse): fix test * feat(module:collapse): fix test * feat(module:collapse): change dom and recover style file * feat(module:collapse): use span replace i * feat(module:collapse): support custom icon
NG-ZORRO · Feb 18, 2019 · a530f80 · a530f80
1 parent cf8e32d
commit a530f80
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 9 deletions.
diff --git 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
@@ -4,10 +4,13 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-collapse-custom',
   template: `
     <nz-collapse [nzBordered]="false">
-      <nz-collapse-panel *ngFor="let panel of panels" [nzHeader]="panel.name" [nzActive]="panel.active"
-        [ngStyle]="panel.customStyle">
+      <nz-collapse-panel *ngFor="let panel of panels; let isFirst = first" [nzHeader]="panel.name" [nzActive]="panel.active"
+        [ngStyle]="panel.customStyle" [nzExpandedIcon]="!isFirst && (panel.icon || expandedIcon)">
         <p>{{panel.name}} content</p>
       </nz-collapse-panel>
+      <ng-template #expandedIcon>
+        <i nz-icon type="caret-right" class="ant-collapse-arrow"></i>
+      </ng-template>
     </nz-collapse>
   `,
   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
@@ -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<boolean>` | - |
+| `[nzExpandedIcon]` | Customize an icon for toggle | `string｜TemplateRef<void>` | - |
diff --git 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<boolean>` | - |
+| `[nzExpandedIcon]` | 自定义切换图标 | `string｜TemplateRef<void>` | - |
diff --git a/components/collapse/nz-collapse-panel.component.html b/components/collapse/nz-collapse-panel.component.html
@@ -1,5 +1,9 @@
 <div role="tab" [attr.aria-expanded]="nzActive" class="ant-collapse-header" (click)="clickHeader()">
-  <i nz-icon type="right" class="ant-collapse-arrow anticon-right" *ngIf="nzShowArrow"></i>
+  <ng-container *ngIf="nzShowArrow">
+    <ng-container *nzStringTemplateOutlet="nzExpandedIcon">
+      <i nz-icon [type]="nzExpandedIcon || 'right'" class="ant-collapse-arrow"></i>
+    </ng-container>
+  </ng-container>
   <ng-container *nzStringTemplateOutlet="nzHeader">{{ nzHeader }}</ng-container>
 </div>
 <div class="ant-collapse-content"

diff --git a/components/collapse/nz-collapse-panel.component.ts b/components/collapse/nz-collapse-panel.component.ts
@@ -35,6 +35,7 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy {
   @Input() @InputBoolean() @HostBinding('class.ant-collapse-item-disabled') nzDisabled = false;
   @Input() @InputBoolean() nzShowArrow = true;
   @Input() nzHeader: string | TemplateRef<void>;
+  @Input() nzExpandedIcon: string | TemplateRef<void>;
   @Output() readonly nzActiveChange = new EventEmitter<boolean>();
 
   clickHeader(): void {

diff --git 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: `
+    <nz-collapse>
+      <nz-collapse-panel>
+        <p>Panel01</p>
+      </nz-collapse-panel>
+      <nz-collapse-panel [nzExpandedIcon]="'double-right'">
+        <p>Panel02</p>
+      </nz-collapse-panel>
+      <nz-collapse-panel [nzExpandedIcon]="expandedIcon">
+        <p>Panel01</p>
+      </nz-collapse-panel>
+      <ng-template #expandedIcon>
+        <i nz-icon type="caret-right" class="ant-collapse-arrow"></i>
+      </ng-template>
+    </nz-collapse>
+  `
+})
+export class NzTestCollapseIconComponent {
+}