Collapse折叠面板

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

何时使用#

  • 对复杂区域进行分组和隐藏,保持页面的整洁。
  • 手风琴 是一种特殊的折叠面板,只允许单个内容区域展开。
import { NzCollapseModule } from 'ng-zorro-antd/collapse';

代码演示

This is panel header 1

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

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

expand codeexpand code
      加载中
    
This is panel header 1

This is panel header 1 content

This is panel header 2 content

This is panel header 3 content

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

expand codeexpand code
      加载中
    
This is panel header 1

This is panel header 1

This is panel header 1-1

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is panel header 2

This is panel header 3

嵌套折叠面板。

expand codeexpand code
      加载中
    
This is panel header 1

This is panel header 1 content

This is panel header 2 content

This is panel header 3 content

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

expand codeexpand code
      加载中
    
This is panel header 1

This is panel header 1 content

This is panel header 2 content

This is panel header 3 content

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

expand codeexpand code
      加载中
    
This is panel header 1

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

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

expand codeexpand code
      加载中
    
This is panel header 1

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.


Expand Icon Position: start

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

expand codeexpand code
      加载中
    
This is panel header 1

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

将折叠面板的背景变成透明。

expand codeexpand code
      加载中
    

API#

nz-collapse#

参数说明类型默认值全局配置
[nzAccordion]是否每次只打开一个 tabbooleanfalse
[nzBordered]是否有边框booleantrue
[nzGhost]使折叠面板透明且无边框booleanfalse
[nzExpandIconPosition]设置图标位置'start' | 'end'start-

nz-collapse-panel#

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