Import
import { CollapsibleCardModule } from '@backbase/ui-ang/collapsible-card'
Usage
Use the bb-collapsible-card-ui component to display an expandable card. Place the title in a child element with bbCollapsibleTitle and the content in a child element with bbCollapsibleBody.
<!-- Basic collapsible card usage -->
<bb-collapsible-card-ui>
<div bbCollapsibleTitle>Collapsible card</div>
<div bbCollapsibleBody>I am expandable content!</div>
</bb-collapsible-card-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
hasChevron |
boolean |
true |
|
highlight |
boolean |
false |
|
isOpen |
boolean |
false |
|
shadow |
boolean |
true |
|
size |
'sm' | 'md' | 'lg' |
'md' |
hasChevron
The hasChevron input determines whether a chevron icon is displayed in the card header. Defaults to true.
<!-- Collapsible card without chevron -->
<bb-collapsible-card-ui [hasChevron]="false">
<div bbCollapsibleTitle>Card title</div>
<div bbCollapsibleBody>Card content</div>
</bb-collapsible-card-ui>
highlight
The highlight input applies a highlight style to the card. Defaults to false.
<!-- Collapsible card with highlight -->
<bb-collapsible-card-ui [highlight]="true">
<div bbCollapsibleTitle>Card title</div>
<div bbCollapsibleBody>Card content</div>
</bb-collapsible-card-ui>
isOpen
The isOpen input controls whether the card is expanded. Defaults to false.
<!-- Collapsible card open by default -->
<bb-collapsible-card-ui [isOpen]="true">
<div bbCollapsibleTitle>Collapsible card</div>
<div bbCollapsibleBody>I am expandable content!</div>
</bb-collapsible-card-ui>
shadow
The shadow input controls whether the card has a shadow effect. Defaults to true.
<!-- Collapsible card without shadow -->
<bb-collapsible-card-ui [shadow]="false">
<div bbCollapsibleTitle>Card title</div>
<div bbCollapsibleBody>Card content</div>
</bb-collapsible-card-ui>
size
The size input sets the card size. Possible values are 'sm', 'md', or 'lg'. Defaults to 'md'.
<!-- Large Collapsible card -->
<bb-collapsible-card-ui [size]="'lg'">
<div bbCollapsibleTitle>Card title</div>
<div bbCollapsibleBody>Card content</div>
</bb-collapsible-card-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.
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Input |
Description |
Type |
|---|---|---|
|
ariaLabel |
Accessible label for the card header button |
string |
|
ariaLabelForIcon |
Accessible label for the chevron icon |
string |
- The card header is rendered as a button with role="button", aria-label, and aria-expanded.
- Keyboard accessibility is provided via tabindex="0" and keyboard click support.