feat(module:collapse): support custom header (#383)

NG-ZORRO · Sep 30, 2017 · ca42f00 · ca42f00
1 parent 8fb32c6
commit ca42f00
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/components/collapse/nz-collapse.component.ts b/src/components/collapse/nz-collapse.component.ts
@@ -18,7 +18,12 @@ import { NzCollapsesetComponent } from './nz-collapseset.component'
   template     : `
     <div class="ant-collapse-header" [attr.aria-expanded]="_active" (click)="clickHeader($event)" role="tab">
       <i class="arrow"></i>
-      {{ nzTitle }}
+      <ng-template [ngIf]="nzTitle">
+        {{ nzTitle }}
+      </ng-template>
+      <ng-template [ngIf]="!nzTitle">
+        <ng-content select="[collapse-title]"></ng-content>
+      </ng-template>
     </div>
     <div class="ant-collapse-content" [@collapseState]="_active?'active':'inactive'">
       <div class="ant-collapse-content-box">

diff --git a/src/showcase/nz-demo-collapse/nz-demo-collapse.html b/src/showcase/nz-demo-collapse/nz-demo-collapse.html
@@ -108,6 +108,12 @@ <h3 id="Collapse.Panel"><span>nz-collapse</span>
           <td>Boolean</td>
           <td>false</td>
         </tr>
+        <tr>
+          <td>[collapse-title]</td>
+          <td>与nzTitle二选一，定义面板头内容</td>
+          <td>ng-content</td>
+          <td>无</td>
+        </tr>
       </tbody>
     </table>
   </section>