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

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