• Collapse折叠面板
    • 何时使用
    • 单独引入此组件
    • 代码演示
    • API
      • nz-collapsecomponent
      • nz-collapse-panelcomponent

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