feat(module:collapse): add extra field (#2923)

* feat(module:collapse): add extra field close #1911 * test: add test
NG-ZORRO · Feb 19, 2019 · dd0cec2 · dd0cec2
1 parent ab62b40
commit dd0cec2
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 3 deletions.
diff --git a/components/collapse/demo/custom.ts b/components/collapse/demo/custom.ts
@@ -5,13 +5,16 @@ import { Component } from '@angular/core';
   template: `
     <nz-collapse [nzBordered]="false">
       <nz-collapse-panel #p *ngFor="let panel of panels; let isFirst = first" [nzHeader]="panel.name" [nzActive]="panel.active"
-        [ngStyle]="panel.customStyle" [nzExpandedIcon]="!isFirst && (panel.icon || expandedIcon)">
+        [ngStyle]="panel.customStyle" [nzExpandedIcon]="!isFirst && (panel.icon || expandedIcon)" [nzExtra]="isFirst && extraTpl">
         <p>{{panel.name}} content</p>
         <ng-template #expandedIcon let-active>
           {{ active }}
           <i nz-icon type="caret-right" class="ant-collapse-arrow" [nzRotate]="p.nzActive ? 90 : -90"></i>
         </ng-template>
       </nz-collapse-panel>
+      <ng-template #extraTpl>
+        <i nz-icon [nzType]="'smile'"></i>
+      </ng-template>
     </nz-collapse>
   `,
   styles  : []

diff --git a/components/collapse/doc/index.en-US.md b/components/collapse/doc/index.en-US.md
@@ -31,3 +31,4 @@ A content area which can be collapsed and expanded.
 | `[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>` | - |
+| `[nzExtra]` | Extra element in the corner | `string｜TemplateRef<void>` | - |
diff --git a/components/collapse/doc/index.zh-CN.md b/components/collapse/doc/index.zh-CN.md
@@ -31,4 +31,5 @@ cols: 1
 | `[nzShowArrow]` | 是否展示箭头 | `boolean` | `true` |
 | `[nzActive]` | 面板是否展开，可双向绑定 | `boolean` | - |
 | `(nzActiveChange)` | 面板展开回调 | `EventEmitter<boolean>` | - |
-| `[nzExpandedIcon]` | 自定义切换图标 | `string｜TemplateRef<void>` | - |
+| `[nzExpandedIcon]` | 自定义切换图标 | `string｜TemplateRef<void>` | - |
+| `[nzExtra]` | 自定义渲染每个面板右上角的内容 | `string｜TemplateRef<void>` | - |
diff --git a/components/collapse/nz-collapse-panel.component.html b/components/collapse/nz-collapse-panel.component.html
@@ -5,6 +5,9 @@
     </ng-container>
   </ng-container>
   <ng-container *nzStringTemplateOutlet="nzHeader">{{ nzHeader }}</ng-container>
+  <div *ngIf="nzExtra" class="ant-collapse-extra">
+    <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
+  </div>
 </div>
 <div class="ant-collapse-content"
   [class.ant-collapse-content-active]="nzActive"

diff --git a/components/collapse/nz-collapse-panel.component.ts b/components/collapse/nz-collapse-panel.component.ts
@@ -36,6 +36,7 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy {
   @Input() @InputBoolean() nzShowArrow = true;
   @Input() nzHeader: string | TemplateRef<void>;
   @Input() nzExpandedIcon: string | TemplateRef<void>;
+  @Input() nzExtra: 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
@@ -39,6 +39,14 @@ describe('collapse', () => {
       fixture.detectChanges();
       expect(collapse.nativeElement.firstElementChild.classList).toContain('ant-collapse-borderless');
     });
+    it('should extra work', () => {
+      expect(collapse.nativeElement.querySelector('.ant-collapse-extra')).toBeNull();
+      testComponent.showExtra = 'extra';
+      fixture.detectChanges();
+      const extra = collapse.nativeElement.querySelector('.ant-collapse-extra');
+      expect(extra).toBeDefined();
+      expect(extra.innerText).toBe('extra');
+    });
     it('should showArrow work', () => {
       fixture.detectChanges();
       expect(panels[ 0 ].nativeElement.querySelector('.ant-collapse-arrow').firstElementChild).toBeDefined();
@@ -168,7 +176,7 @@ describe('collapse', () => {
   template: `
     <ng-template #headerTemplate>template</ng-template>
     <nz-collapse [nzAccordion]="accordion" [nzBordered]="bordered">
-      <nz-collapse-panel [(nzActive)]="active01" (nzActiveChange)="active01Change($event)" [nzHeader]="header" [nzShowArrow]="showArrow">
+      <nz-collapse-panel [(nzActive)]="active01" (nzActiveChange)="active01Change($event)" [nzHeader]="header" [nzShowArrow]="showArrow" [nzExtra]="showExtra">
         <p>Panel01</p>
       </nz-collapse-panel>
       <nz-collapse-panel [(nzActive)]="active02" (nzActiveChange)="active02Change($event)" [nzDisabled]="disabled">
@@ -185,6 +193,7 @@ export class NzTestCollapseBasicComponent {
   active01 = false;
   active02 = false;
   showArrow = true;
+  showExtra = '';
   header = 'string';
   active01Change = jasmine.createSpy('active01 callback');
   active02Change = jasmine.createSpy('active02 callback');

diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less
@@ -22,6 +22,8 @@
 
     > .@{collapse-prefix-cls}-header {
       position: relative;
+      display: flex;
+      align-items: center;
       padding: @collapse-header-padding;
       color: @heading-color;
       line-height: 22px;
@@ -47,6 +49,10 @@
       &:focus {
         outline: none;
       }
+
+      .@{collapse-prefix-cls}-extra {
+        margin: 0 16px 0 auto;
+      }
     }
 
     &.@{collapse-prefix-cls}-no-arrow {