NG-ZORROCollapse折叠面板
可以折叠/展开的内容区域。
何时使用#
- 对复杂区域进行分组和隐藏，保持页面的整洁。
手风琴是一种特殊的折叠面板，只允许单个内容区域展开。
import { NzCollapseModule } from 'ng-zorro-antd/collapse';代码演示
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 1 content
手风琴，每次只打开一个tab。默认打开第一个。
加载中
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.
嵌套折叠面板。
加载中
This is panel header 1 content
一套没有边框的简洁样式。
加载中
This is panel header 1 content
自定义各个面板的背景色、圆角、边距和图标。
加载中
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 组件的箭头图标。
加载中
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:
你可以通过 nzExtra 来指定面板右上角的额外内容。
加载中
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.
将折叠面板的背景变成透明。
加载中
API#
nz-collapse#
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
|---|---|---|---|---|
[nzAccordion] | 是否每次只打开一个 tab | boolean | false | ✅ |
[nzBordered] | 是否有边框 | boolean | true | ✅ |
[nzGhost] | 使折叠面板透明且无边框 | boolean | false | ✅ |
[nzExpandIconPosition] | 设置图标位置 | 'start' | 'end' | start | - |
nz-collapse-panel#
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
|---|---|---|---|---|
[nzDisabled] | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false | - |
[nzHeader] | 面板头内容 | string | TemplateRef<void> | - | - |
[nzExpandedIcon] | 自定义切换图标 | string | TemplateRef<void> | - | - |
[nzExtra] | 自定义渲染每个面板右上角的内容 | string | TemplateRef<void> | - | - |
[nzShowArrow] | 是否展示箭头 | boolean | true | ✅ |
[nzActive] | 面板是否展开，可双向绑定 | boolean | - | - |
(nzActiveChange) | 面板展开回调 | EventEmitter<boolean> | - | - |