Import
import { CollapsibleAccordionModule } from '@backbase/ui-ang/collapsible-accordion'
Usage
Use the bb-collapsible-accordion-ui component to group collapsible panels. Set closeOthers to true for classic accordion behavior, or openFirst to open the first panel on load.
<!-- Basic collapsible accordion usage -->
<bb-collapsible-accordion-ui>
<bb-collapsible-ui>Collapsible Panel #1</bb-collapsible-ui>
<bb-collapsible-ui>Collapsible Panel #2</bb-collapsible-ui>
<bb-collapsible-ui>Collapsible Panel #3</bb-collapsible-ui>
</bb-collapsible-accordion-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
closeOthers |
boolean |
false |
|
obeyParentAccordion |
boolean |
|
|
openFirst |
boolean |
false |
closeOthers
The closeOthers input ensures that only one collapsible panel can be open at a time. When set to true, opening one panel will close the others. Defaults to false.
<!-- Accordion with only one open panel -->
<bb-collapsible-accordion-ui [closeOthers]="true">
<bb-collapsible-ui>Panel 1 content</bb-collapsible-ui>
<bb-collapsible-ui>Panel 2 content</bb-collapsible-ui>
</bb-collapsible-accordion-ui>
obeyParentAccordion
The obeyParentAccordion input, when set to true and used inside another collapsible accordion, makes this instance inherit the parent accordion's behavior. This is useful for nested accordions.
<!-- Nested Accordion obeying parent behavior -->
<bb-collapsible-accordion-ui>
<bb-collapsible-ui>Panel 1 content</bb-collapsible-ui>
<bb-collapsible-accordion-ui [obeyParentAccordion]="true">
<bb-collapsible-ui>Nested Panel 1</bb-collapsible-ui>
<bb-collapsible-ui>Nested Panel 2</bb-collapsible-ui>
</bb-collapsible-accordion-ui>
</bb-collapsible-accordion-ui>
openFirst
The openFirst input opens the first collapsible panel on load. Defaults to false.
<!-- Accordion with first panel open -->
<bb-collapsible-accordion-ui [openFirst]="true">
<bb-collapsible-ui>Panel 1 content</bb-collapsible-ui>
<bb-collapsible-ui>Panel 2 content</bb-collapsible-ui>
</bb-collapsible-accordion-ui>
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.
- The collapsible accordion acts as a container; accessibility is determined by the child Collapsible panels.
- Ensure each child panel is properly labeled and accessible for users relying on assistive technologies.