Skip to main content

Results Accordion Item

This section describes the BfmResultsAccordionItemComponent component.

Usage​

If you need more customization, you need to import it in your module and use it in your template.

results-accordion-item.component.ts
import { BfmResultsAccordionItemComponent } from '@celerofinancas/ui-reports';

@Component({
standalone: true,
selector: 'results-accordion-item',
imports: [BfmResultsAccordionItemComponent],
templateUrl: './results-accordion-item.component.html',
})
export class ResultsAccordionItemComponent {}

Then, in your template, you can use the component like this:

results-accordion-item.component.html
<bfm-results-accordion-item
[categoryColor]="'c-revenue'"
[expanded]="false"
[hasArrow]="true"
[levelType]="'header'"
[resultInformation]="resultInformation"
[resultName]="'Result Name'"
[tooltip]="'Tooltip text'"
(toggle)="handleToggle($event)"
/>

Inputs​

The BfmResultsAccordionItemComponent component has the following inputs:

categoryColor​

Category color

TypeDefault
`"c-revenue""c-info-400"

expanded​

Controls if item is expanded or not

TypeDefault
booleanfalse

hasArrow​

Whether it should display accordion arrow

TypeDefault
booleantrue

levelType​

Level type

TypeDefault
`"header""account"

resultInformation​

Accordion item information

TypeDefault
ResultItemnull

resultName​

Header name to display

TypeDefault
string''

tooltip​

Tooltip to display

TypeDefault
string''

Events​

The BfmResultsAccordionItemComponent component has the following events:

toggle​

Emitted when item is clicked

Type
EventEmitter<any>