Collapse折叠面板

可以折叠/展开的内容区域。

何时使用

  • 对复杂区域进行分组和隐藏，保持页面的整洁。
  • 手风琴 是一种特殊的折叠面板，只允许单个内容区域展开。

单独引入此组件

想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

  1. import { NzCollapseModule } from 'ng-zorro-antd/collapse';

代码演示

Collapse折叠面板 - 图1

折叠面板

可以同时展开多个面板，这个例子默认展开了第一个。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-collapse-basic',
  5.   template: `
  6.     <nz-collapse>
  7.       <nz-collapse-panel
  8.         *ngFor="let panel of panels"
  9.         [nzHeader]="panel.name"
  10.         [nzActive]="panel.active"
  11.         [nzDisabled]="panel.disabled"
  12.       >
  13.         <p style="margin:0;">
  14.           A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome
  15.           guest in many households across the world.
  16.         </p>
  17.       </nz-collapse-panel>
  18.     </nz-collapse>
  19.   `
  20. })
  21. export class NzDemoCollapseBasicComponent {
  22.   panels = [
  23.     {
  24.       active: true,
  25.       name: 'This is panel header 1',
  26.       disabled: false
  27.     },
  28.     {
  29.       active: false,
  30.       disabled: false,
  31.       name: 'This is panel header 2'
  32.     },
  33.     {
  34.       active: false,
  35.       disabled: true,
  36.       name: 'This is panel header 3'
  37.     }
  38.   ];
  39. }

Collapse折叠面板 - 图2

手风琴

手风琴，每次只打开一个tab。默认打开第一个。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-collapse-accordion',
  5.   template: `
  6.     <nz-collapse nzAccordion>
  7.       <nz-collapse-panel *ngFor="let panel of panels" [nzHeader]="panel.name" [nzActive]="panel.active">
  8.         <p>{{ panel.name }} content</p>
  9.       </nz-collapse-panel>
  10.     </nz-collapse>
  11.   `
  12. })
  13. export class NzDemoCollapseAccordionComponent {
  14.   panels = [
  15.     {
  16.       active: true,
  17.       name: 'This is panel header 1',
  18.       childPanel: [
  19.         {
  20.           active: false,
  21.           name: 'This is panel header 1-1'
  22.         }
  23.       ]
  24.     },
  25.     {
  26.       active: false,
  27.       name: 'This is panel header 2'
  28.     },
  29.     {
  30.       active: false,
  31.       name: 'This is panel header 3'
  32.     }
  33.   ];
  34. }

Collapse折叠面板 - 图3

面板嵌套

嵌套折叠面板。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-collapse-mix',
  5.   template: `
  6.     <nz-collapse>
  7.       <nz-collapse-panel *ngFor="let panel of panels" [nzHeader]="panel.name" [nzActive]="panel.active">
  8.         <p>{{ panel.name }}</p>
  9.         <div *ngIf="panel.childPanel && panel.childPanel.length > 0">
  10.           <nz-collapse>
  11.             <nz-collapse-panel
  12.               *ngFor="let childPanel of panel.childPanel"
  13.               [nzHeader]="childPanel.name"
  14.               [nzActive]="childPanel.active"
  15.             >
  16.               <p>
  17.                 A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a
  18.                 welcome guest in many households across the world.
  19.               </p>
  20.             </nz-collapse-panel>
  21.           </nz-collapse>
  22.         </div>
  23.       </nz-collapse-panel>
  24.     </nz-collapse>
  25.   `
  26. })
  27. export class NzDemoCollapseMixComponent {
  28.   panels = [
  29.     {
  30.       active: true,
  31.       disabled: false,
  32.       name: 'This is panel header 1',
  33.       childPanel: [
  34.         {
  35.           active: true,
  36.           name: 'This is panel header 1-1'
  37.         },
  38.         {
  39.           active: false,
  40.           name: 'This is panel header 1-2'
  41.         }
  42.       ]
  43.     },
  44.     {
  45.       active: false,
  46.       disabled: true,
  47.       name: 'This is panel header 2'
  48.     },
  49.     {
  50.       active: false,
  51.       disabled: false,
  52.       name: 'This is panel header 3'
  53.     }
  54.   ];
  55. }

Collapse折叠面板 - 图4

简洁风格

一套没有边框的简洁样式。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-collapse-borderless',
  5.   template: `
  6.     <nz-collapse [nzBordered]="false">
  7.       <nz-collapse-panel *ngFor="let panel of panels" [nzHeader]="panel.name" [nzActive]="panel.active">
  8.         <p>{{ panel.name }} content</p>
  9.       </nz-collapse-panel>
  10.     </nz-collapse>
  11.   `
  12. })
  13. export class NzDemoCollapseBorderlessComponent {
  14.   panels = [
  15.     {
  16.       active: true,
  17.       disabled: false,
  18.       name: 'This is panel header 1',
  19.       childPannel: [
  20.         {
  21.           active: false,
  22.           disabled: true,
  23.           name: 'This is panel header 1-1'
  24.         }
  25.       ]
  26.     },
  27.     {
  28.       active: false,
  29.       disabled: true,
  30.       name: 'This is panel header 2'
  31.     },
  32.     {
  33.       active: false,
  34.       disabled: false,
  35.       name: 'This is panel header 3'
  36.     }
  37.   ];
  38. }

Collapse折叠面板 - 图5

自定义面板

自定义各个面板的背景色、圆角、边距和图标。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-collapse-custom',
  5.   template: `
  6.     <nz-collapse [nzBordered]="false">
  7.       <nz-collapse-panel
  8.         #p
  9.         *ngFor="let panel of panels; let isFirst = first"
  10.         [nzHeader]="panel.name"
  11.         [nzActive]="panel.active"
  12.         [ngStyle]="panel.customStyle"
  13.         [nzExpandedIcon]="!isFirst && (panel.icon || expandedIcon)"
  14.       >
  15.         <p>{{ panel.name }} content</p>
  16.         <ng-template #expandedIcon let-active>
  17.           {{ active }}
  18.           <i nz-icon nzType="caret-right" class="ant-collapse-arrow" [nzRotate]="p.nzActive ? 90 : -90"></i>
  19.         </ng-template>
  20.       </nz-collapse-panel>
  21.     </nz-collapse>
  22.   `
  23. })
  24. export class NzDemoCollapseCustomComponent {
  25.   panels = [
  26.     {
  27.       active: true,
  28.       disabled: false,
  29.       name: 'This is panel header 1',
  30.       customStyle: {
  31.         background: '#f7f7f7',
  32.         'border-radius': '4px',
  33.         'margin-bottom': '24px',
  34.         border: '0px'
  35.       }
  36.     },
  37.     {
  38.       active: false,
  39.       disabled: true,
  40.       name: 'This is panel header 2',
  41.       icon: 'double-right',
  42.       customStyle: {
  43.         background: '#f7f7f7',
  44.         'border-radius': '4px',
  45.         'margin-bottom': '24px',
  46.         border: '0px'
  47.       }
  48.     },
  49.     {
  50.       active: false,
  51.       disabled: false,
  52.       name: 'This is panel header 3',
  53.       customStyle: {
  54.         background: '#f7f7f7',
  55.         'border-radius': '4px',
  56.         'margin-bottom': '24px',
  57.         border: '0px'
  58.       }
  59.     }
  60.   ];
  61. }

Collapse折叠面板 - 图6

隐藏箭头

你可以通过 [nzShowArrow]="false" 隐藏 nz-collapse-panel 组件的箭头图标。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-collapse-noarrow',
  5.   template: `
  6.     <nz-collapse>
  7.       <nz-collapse-panel
  8.         *ngFor="let panel of panels"
  9.         [nzHeader]="panel.name"
  10.         [nzActive]="panel.active"
  11.         [nzDisabled]="panel.disabled"
  12.         [nzShowArrow]="panel.arrow"
  13.       >
  14.         <p style="margin:0;">
  15.           A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome
  16.           guest in many households across the world.
  17.         </p>
  18.       </nz-collapse-panel>
  19.     </nz-collapse>
  20.   `
  21. })
  22. export class NzDemoCollapseNoarrowComponent {
  23.   panels = [
  24.     {
  25.       active: true,
  26.       name: 'This is panel header 1',
  27.       arrow: true
  28.     },
  29.     {
  30.       active: false,
  31.       arrow: false,
  32.       name: 'This is panel header 2'
  33.     }
  34.   ];
  35. }

Collapse折叠面板 - 图7

额外节点

你可以通过 nzExtra 来指定面板右上角的额外内容。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-collapse-extra',
  5.   template: `
  6.     <nz-collapse>
  7.       <nz-collapse-panel
  8.         *ngFor="let panel of panels"
  9.         [nzHeader]="panel.name"
  10.         [nzActive]="panel.active"
  11.         [nzExtra]="extraTpl"
  12.         [nzDisabled]="panel.disabled"
  13.       >
  14.         <p style="margin:0;">
  15.           A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome
  16.           guest in many households across the world.
  17.         </p>
  18.       </nz-collapse-panel>
  19.     </nz-collapse>
  20.     <ng-template #extraTpl>
  21.       <!-- You can use stopPropagation if you don't want the panel to toggle -->
  22.       <i nz-icon nzType="setting" (click)="$event.stopPropagation()"></i>
  23.     </ng-template>
  24.   `
  25. })
  26. export class NzDemoCollapseExtraComponent {
  27.   panels = [
  28.     {
  29.       active: true,
  30.       name: 'This is panel header 1',
  31.       disabled: false
  32.     },
  33.     {
  34.       active: false,
  35.       disabled: false,
  36.       name: 'This is panel header 2'
  37.     },
  38.     {
  39.       active: false,
  40.       disabled: true,
  41.       name: 'This is panel header 3'
  42.     }
  43.   ];
  44. }

API

nz-collapsecomponent

参数说明类型默认值
[nzAccordion]是否每次只打开一个tabbooleanfalse
[nzBordered]是否有边框booleantrue

nz-collapse-panelcomponent

参数说明类型默认值
[nzDisabled]禁用后的面板展开与否将无法通过用户交互改变booleanfalse
[nzHeader]面板头内容string | TemplateRef<void>-
[nzExpandedIcon]自定义切换图标string | TemplateRef<void>-
[nzExtra]自定义渲染每个面板右上角的内容string | TemplateRef<void>-
[nzShowArrow]是否展示箭头booleantrue
[nzActive]面板是否展开，可双向绑定boolean-
(nzActiveChange)面板展开回调EventEmitter<boolean>-