Import
import { TrackerModule } from '@backbase/ui-ang/tracker'
Usage
Use the bb-tracker-ui component with bb-tracker-segment-ui child components to create a tracker. The tracker displays progress through multiple segments with visual indicators.
<!-- Basic tracker usage -->
<bb-tracker-ui>
<bb-tracker-segment-ui
label="File upload"
[isCompleted]="true">
</bb-tracker-segment-ui>
<bb-tracker-segment-ui
label="File mapping"
[isActive]="true"
[progress]="50">
</bb-tracker-segment-ui>
<bb-tracker-segment-ui
label="Review">
</bb-tracker-segment-ui>
</bb-tracker-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
countFn |
(index: number, total: number) => string |
undefined |
|
disableAnimation |
boolean |
false |
|
hideCount |
boolean |
false |
|
segmented |
boolean |
true |
|
segmentActiveIconName |
string |
'loop' |
|
segmentCompletedIconName |
string |
'check' |
|
separator |
string |
'.' |
|
showSegmentIcons |
boolean |
false |
|
vertical |
boolean |
false |
|
forceMobileView |
boolean |
undefined |
countFn
The countFn input sets a custom counting function that overrides the default behavior for displaying segment numbers.
<!-- Tracker with custom count function -->
<bb-tracker-ui [countFn]="customCountFunction">
<bb-tracker-segment-ui label="Step 1"></bb-tracker-segment-ui>
<bb-tracker-segment-ui label="Step 2"></bb-tracker-segment-ui>
</bb-tracker-ui>
disableAnimation
The disableAnimation input disables component animations when set to true.
<!-- Tracker with disabled animations -->
<bb-tracker-ui [disableAnimation]="true">
<bb-tracker-segment-ui label="Step 1" [isActive]="true"></bb-tracker-segment-ui>
<bb-tracker-segment-ui label="Step 2"></bb-tracker-segment-ui>
</bb-tracker-ui>
hideCount
The hideCount input hides the segment count display when set to true.
<!-- Tracker without segment counts -->
<bb-tracker-ui [hideCount]="true">
<bb-tracker-segment-ui label="Upload"></bb-tracker-segment-ui>
<bb-tracker-segment-ui label="Process"></bb-tracker-segment-ui>
</bb-tracker-ui>
segmented
The segmented input controls whether the tracker is in segmented mode. When false, displays as a linear tracker.
<!-- Linear tracker -->
<bb-tracker-ui [segmented]="false">
<bb-tracker-segment-ui
label="Current Process"
[isActive]="true"
[progress]="60">
</bb-tracker-segment-ui>
</bb-tracker-ui>
segmentActiveIconName
The segmentActiveIconName input sets the name of the icon used for active segments when icons are enabled.
<!-- Tracker with custom active icon -->
<bb-tracker-ui
[showSegmentIcons]="true"
segmentActiveIconName="clock">
<bb-tracker-segment-ui label="Processing" [isActive]="true"></bb-tracker-segment-ui>
</bb-tracker-ui>
segmentCompletedIconName
The segmentCompletedIconName input sets the name of the icon used for completed segments when icons are enabled.
<!-- Tracker with custom completed icon -->
<bb-tracker-ui
[showSegmentIcons]="true"
segmentCompletedIconName="check-circle">
<bb-tracker-segment-ui label="Upload" [isCompleted]="true"></bb-tracker-segment-ui>
</bb-tracker-ui>
separator
The separator input sets the separator between count text and segment label in non-vertical mode.
<!-- Tracker with custom separator -->
<bb-tracker-ui separator="-">
<bb-tracker-segment-ui label="Step 1"></bb-tracker-segment-ui>
<bb-tracker-segment-ui label="Step 2"></bb-tracker-segment-ui>
</bb-tracker-ui>
showSegmentIcons
The showSegmentIcons input enables the display of icons for active and completed segments.
<!-- Tracker with segment icons -->
<bb-tracker-ui [showSegmentIcons]="true">
<bb-tracker-segment-ui label="Upload" [isCompleted]="true"></bb-tracker-segment-ui>
<bb-tracker-segment-ui label="Process" [isActive]="true"></bb-tracker-segment-ui>
</bb-tracker-ui>
vertical
The vertical input displays the tracker in vertical orientation when set to true.
<!-- Vertical tracker -->
<bb-tracker-ui [vertical]="true">
<bb-tracker-segment-ui label="Product selection" [isCompleted]="true"></bb-tracker-segment-ui>
<bb-tracker-segment-ui label="Your profile" [isActive]="true"></bb-tracker-segment-ui>
<bb-tracker-segment-ui label="Business details"></bb-tracker-segment-ui>
</bb-tracker-ui>
forceMobileView
Overrides the automatic responsive behavior for horizontal segmented trackers. When true, forces mobile layout regardless of screen size. When false, prevents mobile layout regardless of screen size. When undefined (default), uses responsive behavior based on screen width.
<bb-tracker-ui [forceMobileView]="true">
<bb-tracker-segment-ui [label]="'Always mobile layout'"></bb-tracker-segment-ui>
</bb-tracker-ui>
Tracker Segment inputs
|
Input |
Type |
Default |
|---|---|---|
|
countText |
string |
undefined |
|
hideCount |
boolean |
false |
|
isActive |
boolean |
false |
|
isCompleted |
boolean |
false |
|
label |
string |
'' |
|
progress |
number |
0 |
|
separator |
string |
'' |
|
subtitle |
string |
undefined |
countText
The countText input sets custom count text for the segment, overriding the default numbering.
<!-- Segment with custom count text -->
<bb-tracker-segment-ui
countText="Phase A"
label="Initial Setup">
</bb-tracker-segment-ui>
hideCount
The hideCount input hides the count display for the individual segment.
<!-- Segment without count display -->
<bb-tracker-segment-ui
[hideCount]="true"
label="Setup">
</bb-tracker-segment-ui>
isActive
The isActive input marks the segment as currently active, applying active styling and enabling progress display.
<!-- Active segment with progress -->
<bb-tracker-segment-ui
[isActive]="true"
[progress]="75"
label="Processing">
</bb-tracker-segment-ui>
isCompleted
The isCompleted input marks the segment as completed, applying completed styling.
<!-- Completed segment -->
<bb-tracker-segment-ui
[isCompleted]="true"
label="Upload Complete">
</bb-tracker-segment-ui>
label
The label input sets the text label displayed for the segment.
<!-- Segment with label -->
<bb-tracker-segment-ui label="File Processing"></bb-tracker-segment-ui>
progress
The progress input sets the progress level of the segment as a percentage (0-100).
<!-- Segment with progress -->
<bb-tracker-segment-ui
[isActive]="true"
[progress]="45"
label="Uploading">
</bb-tracker-segment-ui>
separator
The separator input sets a custom separator between count text and segment label for the individual segment.
<!-- Segment with custom separator -->
<bb-tracker-segment-ui
separator=":"
label="Custom Step">
</bb-tracker-segment-ui>
subtitle
The subtitle input sets additional subtitle text displayed below the main label.
<!-- Segment with subtitle -->
<bb-tracker-segment-ui
label="Identity verification"
subtitle="Upload your documents">
</bb-tracker-segment-ui>
Responsive behavior
The tracker automatically adapts to different screen sizes. In segmented horizontal mode, the component switches to linear mode on mobile breakpoints for better usability.
<!-- Tracker that adapts to mobile -->
<bb-tracker-ui [segmented]="true" [vertical]="false">
<bb-tracker-segment-ui label="Step 1"></bb-tracker-segment-ui>
<bb-tracker-segment-ui label="Step 2"></bb-tracker-segment-ui>
<bb-tracker-segment-ui label="Step 3"></bb-tracker-segment-ui>
</bb-tracker-ui>
Static List display
Use the tracker for static instructional content by providing segments without active or completed states.
<!-- Static instruction list -->
<bb-tracker-ui [vertical]="true">
<bb-tracker-segment-ui
label="1. Go to Accounts to select the account"
subtitle="You can choose checking and savings accounts for Direct Deposit">
</bb-tracker-segment-ui>
<bb-tracker-segment-ui
label="2. Tap on Details"
subtitle="You'll find Details below the account balance for your selected account">
</bb-tracker-segment-ui>
</bb-tracker-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 tracker component includes comprehensive accessibility features:
- Active segments use role="progressbar" with appropriate ARIA attributes for progress indication
- Progress values are communicated through aria-valuemin, aria-valuemax, and aria-valuenow
- Segment labels are properly associated with their corresponding elements
- Custom ARIA labels can be provided for enhanced accessibility
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 |
Sets the accessible label for individual segments when different from the visible label |
string |
|
progressAriaLabel |
Sets the accessible label for the progress element of active segments |
string |