Import
import { HighlightModule } from '@backbase/ui-ang/highlight'
Usage
Apply the bbHighlight directive to an element and bind the amount input to a numeric value. The directive will automatically apply a positive or negative class based on the value.
<!-- Basic highlight usage -->
<span [bbHighlight]="true" [amount]="1234">1234</span>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
amount |
string | number |
0 |
|
bbHighlight |
boolean | '' |
true |
|
negativeClass |
string |
'bb-amount-negative' |
|
positiveClass |
string |
'bb-amount-positive' |
amount
The amount input sets the numeric value to be evaluated. If the value is positive or zero, the positive class is applied; if negative, the negative class is applied.
<!-- Highlight with a positive amount -->
<span [amount]="1234" [bbHighlight]="true">1234</span>
bbHighlight
The bbHighlight input enables or disables the highlighting behavior. When set to true or an empty string, highlighting is enabled.
<!-- Highlight enabled -->
<span [bbHighlight]="true" [amount]="1234">1234</span>
negativeClass
The negativeClass input sets the CSS class to apply when the amount is negative. By default, it uses 'bb-amount--negative'.
<!-- Custom negative class -->
<span [amount]="-100" [bbHighlight]="true" negativeClass="my-negative-class">-100</span>
positiveClass
The positiveClass input sets the CSS class to apply when the amount is positive or zero. By default, it uses 'bb-amount--positive'.
<!-- Custom positive class -->
<span [amount]="100" [bbHighlight]="true" positiveClass="my-positive-class">100</span>
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 highlight directive only applies CSS classes and does not alter the semantic structure of the content.
- Ensure that color is not the only means of conveying information, to meet accessibility guidelines for users with color vision deficiencies.
- If using custom classes, verify that sufficient color contrast is maintained.