Collapse折叠面板

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

何时使用

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

单独引入此组件

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

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

代码演示

Collapse折叠面板 - 图1

折叠面板

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

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

Collapse折叠面板 - 图2

手风琴

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

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

Collapse折叠面板 - 图3

面板嵌套

嵌套折叠面板。

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

Collapse折叠面板 - 图4

简洁风格

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

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

Collapse折叠面板 - 图5

自定义面板

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

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

Collapse折叠面板 - 图6

隐藏箭头

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-collapse-noarrow',
  4. template: `
  5. <nz-collapse>
  6. <nz-collapse-panel
  7. *ngFor="let panel of panels"
  8. [nzHeader]="panel.name"
  9. [nzActive]="panel.active"
  10. [nzDisabled]="panel.disabled"
  11. [nzShowArrow]="panel.arrow"
  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 NzDemoCollapseNoarrowComponent {
  22. panels = [
  23. {
  24. active: true,
  25. name: 'This is panel header 1',
  26. arrow: true
  27. },
  28. {
  29. active: false,
  30. arrow: false,
  31. name: 'This is panel header 2'
  32. }
  33. ];
  34. }

Collapse折叠面板 - 图7

额外节点

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-collapse-extra',
  4. template: `
  5. <nz-collapse>
  6. <nz-collapse-panel
  7. *ngFor="let panel of panels"
  8. [nzHeader]="panel.name"
  9. [nzActive]="panel.active"
  10. [nzExtra]="extraTpl"
  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. <ng-template #extraTpl>
  20. <i nz-icon nzType="setting"></i>
  21. </ng-template>
  22. `
  23. })
  24. export class NzDemoCollapseExtraComponent {
  25. panels = [
  26. {
  27. active: true,
  28. name: 'This is panel header 1',
  29. disabled: false
  30. },
  31. {
  32. active: false,
  33. disabled: false,
  34. name: 'This is panel header 2'
  35. },
  36. {
  37. active: false,
  38. disabled: true,
  39. name: 'This is panel header 3'
  40. }
  41. ];
  42. }

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