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.   styles: []
  21. })
  22. export class NzDemoCollapseBasicComponent {
  23.   panels = [
  24.     {
  25.       active: true,
  26.       name: 'This is panel header 1',
  27.       disabled: false
  28.     },
  29.     {
  30.       active: false,
  31.       disabled: false,
  32.       name: 'This is panel header 2'
  33.     },
  34.     {
  35.       active: false,
  36.       disabled: true,
  37.       name: 'This is panel header 3'
  38.     }
  39.   ];
  40. }

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.   styles: []
  13. })
  14. export class NzDemoCollapseAccordionComponent {
  15.   panels = [
  16.     {
  17.       active: true,
  18.       name: 'This is panel header 1',
  19.       childPanel: [
  20.         {
  21.           active: false,
  22.           name: 'This is panel header 1-1'
  23.         }
  24.       ]
  25.     },
  26.     {
  27.       active: false,
  28.       name: 'This is panel header 2'
  29.     },
  30.     {
  31.       active: false,
  32.       name: 'This is panel header 3'
  33.     }
  34.   ];
  35. }

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.   styles: []
  27. })
  28. export class NzDemoCollapseMixComponent {
  29.   panels = [
  30.     {
  31.       active: true,
  32.       disabled: false,
  33.       name: 'This is panel header 1',
  34.       childPanel: [
  35.         {
  36.           active: true,
  37.           name: 'This is panel header 1-1'
  38.         },
  39.         {
  40.           active: false,
  41.           name: 'This is panel header 1-2'
  42.         }
  43.       ]
  44.     },
  45.     {
  46.       active: false,
  47.       disabled: true,
  48.       name: 'This is panel header 2'
  49.     },
  50.     {
  51.       active: false,
  52.       disabled: false,
  53.       name: 'This is panel header 3'
  54.     }
  55.   ];
  56. }

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.   styles: []
  13. })
  14. export class NzDemoCollapseBorderlessComponent {
  15.   panels = [
  16.     {
  17.       active: true,
  18.       disabled: false,
  19.       name: 'This is panel header 1',
  20.       childPannel: [
  21.         {
  22.           active: false,
  23.           disabled: true,
  24.           name: 'This is panel header 1-1'
  25.         }
  26.       ]
  27.     },
  28.     {
  29.       active: false,
  30.       disabled: true,
  31.       name: 'This is panel header 2'
  32.     },
  33.     {
  34.       active: false,
  35.       disabled: false,
  36.       name: 'This is panel header 3'
  37.     }
  38.   ];
  39. }

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 type="caret-right" class="ant-collapse-arrow" [nzRotate]="p.nzActive ? 90 : -90"></i>
  19.         </ng-template>
  20.       </nz-collapse-panel>
  21.     </nz-collapse>
  22.   `,
  23.   styles: []
  24. })
  25. export class NzDemoCollapseCustomComponent {
  26.   panels = [
  27.     {
  28.       active: true,
  29.       disabled: false,
  30.       name: 'This is panel header 1',
  31.       customStyle: {
  32.         background: '#f7f7f7',
  33.         'border-radius': '4px',
  34.         'margin-bottom': '24px',
  35.         border: '0px'
  36.       }
  37.     },
  38.     {
  39.       active: false,
  40.       disabled: true,
  41.       name: 'This is panel header 2',
  42.       icon: 'double-right',
  43.       customStyle: {
  44.         background: '#f7f7f7',
  45.         'border-radius': '4px',
  46.         'margin-bottom': '24px',
  47.         border: '0px'
  48.       }
  49.     },
  50.     {
  51.       active: false,
  52.       disabled: false,
  53.       name: 'This is panel header 3',
  54.       customStyle: {
  55.         background: '#f7f7f7',
  56.         'border-radius': '4px',
  57.         'margin-bottom': '24px',
  58.         border: '0px'
  59.       }
  60.     }
  61.   ];
  62. }

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.   styles: []
  22. })
  23. export class NzDemoCollapseNoarrowComponent {
  24.   panels = [
  25.     {
  26.       active: true,
  27.       name: 'This is panel header 1',
  28.       arrow: true
  29.     },
  30.     {
  31.       active: false,
  32.       arrow: false,
  33.       name: 'This is panel header 2'
  34.     }
  35.   ];
  36. }

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.       <i nz-icon nzType="setting"></i>
  22.     </ng-template>
  23.   `,
  24.   styles: []
  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

单独引入此组件

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

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

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>-