NG-ZORROCollapse
A content area which can be collapsed and expanded.
When To Use#
- Can be used to group or hide complex regions to keep the page clean.
Accordionis a special kind ofCollapse, which allows only one panel to be expanded at a time.
import { NzCollapseModule } from 'ng-zorro-antd/collapse';Examples
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.
More than one panel can be expanded at a time, the first panel is initialized to be active in this case.
Loading...
This is panel header 1 content
Accordion mode, only one panel can be expanded at a time. The first panel will be expanded by default.
Loading...
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.
Collapse is nested inside the Collapse.
Loading...
This is panel header 1 content
A borderless style of Collapse.
Loading...
This is panel header 1 content
Customize the background, border, margin and icon styles for each panel.
Loading...
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.
You can disable showing arrow icon by passing [nzShowArrow]="false" to nz-collapse-panel component.
Loading...
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:
You can use nzExtra to put extra elements in the top right corner.
Loading...
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.
Making collapse's background to transparent.
Loading...
API#
nz-collapse#
| Property | Description | Type | Default | Global Config |
|---|---|---|---|---|
[nzAccordion] | Accordion mode | boolean | false | ✅ |
[nzBordered] | Set border style | boolean | true | ✅ |
[nzGhost] | Make the collapse borderless and its background transparent | boolean | false | ✅ |
[nzExpandIconPosition] | Set expand icon position | 'start' | 'end' | start | - |
nz-collapse-panel#
| Property | Description | Type | Default | Global Config |
|---|---|---|---|---|
[nzDisabled] | If true, panel cannot be opened or closed | boolean | false | - |
[nzHeader] | Title of the panel | string | TemplateRef<void> | - | - |
[nzExpandedIcon] | Customize an icon for toggle | string | TemplateRef<void> | - | - |
[nzExtra] | Extra element in the corner | string | TemplateRef<void> | - | - |
[nzShowArrow] | Display arrow or not | boolean | true | ✅ |
[nzActive] | Active status of panel, double binding | boolean | - | - |
(nzActiveChange) | Callback function of the active status | EventEmitter<boolean> | - | - |