Import
import { CollapsibleModule } from '@backbase/ui-ang/collapsible'
Usage
Use the bb-collapsible-ui component to create an expandable panel. Provide a header and body using ng-template with the bbCollapsibleHeader and bbCollapsibleBody directives.
<!-- Basic collapsible usage -->
<bb-collapsible-ui>
<ng-template bbCollapsibleHeader let-toggle="toggle">
<div (click)="toggle()">Header</div>
</ng-template>
<ng-template bbCollapsibleBody>
<div>Body content</div>
</ng-template>
</bb-collapsible-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
isOpen |
boolean |
false |
|
recreateBodyContent |
boolean |
false |
isOpen
The isOpen input controls whether the panel is expanded. Defaults to false.
<!-- Collapsible open by default -->
<bb-collapsible-ui [isOpen]="true">
<ng-template bbCollapsibleHeader let-toggle="toggle">
<div (click)="toggle()">Header</div>
</ng-template>
<ng-template bbCollapsibleBody>
<div>Body content</div>
</ng-template>
</bb-collapsible-ui>
recreateBodyContent
The recreateBodyContent input, when set to true, recreates the body content on each open/close. This is less performant but removes the extra div wrapper, which can help with styling issues. Defaults to false.
<!-- Collapsible with body recreation -->
<bb-collapsible-ui [recreateBodyContent]="true">
<ng-template bbCollapsibleHeader let-toggle="toggle">
<div (click)="toggle()">Header</div>
</ng-template>
<ng-template bbCollapsibleBody>
<div>Body content</div>
</ng-template>
</bb-collapsible-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
isOpenChange |
EventEmitter<boolean> |
Emitted when the open state changes |
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
- Accessibility is determined by the content and structure of the header and body templates provided to the component.
- Ensure the header template is focusable and operable via keyboard for users relying on assistive technologies.