Import
import { TabModule } from '@backbase/ui-ang/tab'
Usage
Use the bb-tab-group-ui component with bb-tab-ui child components to create a tab interface. The tab group manages the selection state and emits events when tabs are clicked.
<!-- Basic tab usage -->
<bb-tab-group-ui>
<bb-tab-ui>First</bb-tab-ui>
<bb-tab-ui>Second</bb-tab-ui>
<bb-tab-ui>Third</bb-tab-ui>
</bb-tab-group-ui>
Tab Group inputs
|
Input |
Type |
Default |
|---|---|---|
|
initialSelection |
number |
0 |
initialSelection
The initialSelection input sets the index of the initially selected tab.
<!-- Tab group with third tab initially selected -->
<bb-tab-group-ui [initialSelection]="2">
<bb-tab-ui>First</bb-tab-ui>
<bb-tab-ui>Second</bb-tab-ui>
<bb-tab-ui>Third</bb-tab-ui>
</bb-tab-group-ui>
Tab inputs
|
Input |
Type |
Default |
|---|---|---|
|
disabled |
boolean |
false |
disabled
The disabled input sets whether the individual tab is disabled and cannot be selected.
<!-- Tab group with disabled tab -->
<bb-tab-group-ui>
<bb-tab-ui>First</bb-tab-ui>
<bb-tab-ui>Second</bb-tab-ui>
<bb-tab-ui [disabled]="true">Third (Disabled)</bb-tab-ui>
</bb-tab-group-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
select |
EventEmitter<number> |
Emits the index of the selected tab when a tab is clicked |
Handle tab selection changes by listening to the select output:
// Component TypeScript
export class MyComponent {
selectedTabIndex = 0;
onTabSelect(index: number) {
this.selectedTabIndex = index;
console.log(`Tab ${index} selected`);
}
}
<!-- Template with event handling -->
<bb-tab-group-ui (select)="onTabSelect($event)">
<bb-tab-ui>First</bb-tab-ui>
<bb-tab-ui>Second</bb-tab-ui>
<bb-tab-ui>Third</bb-tab-ui>
</bb-tab-group-ui>
CSS Classes
The following CSS classes can be used to customize the tab appearance for different backgrounds:
On color styling
Apply the bb-tab--on-color class when displaying tabs on colored backgrounds.
<!-- Tabs on colored background -->
<div class="bg-primary">
<bb-tab-group-ui class="bb-tab--on-color">
<bb-tab-ui>First</bb-tab-ui>
<bb-tab-ui>Second</bb-tab-ui>
<bb-tab-ui>Third</bb-tab-ui>
</bb-tab-group-ui>
</div>
Inverse styling
Apply the bb-tab--inverse class when displaying tabs on dark backgrounds.
<!-- Tabs on dark background -->
<div class="bg-dark">
<bb-tab-group-ui class="bb-tab--inverse">
<bb-tab-ui>First</bb-tab-ui>
<bb-tab-ui>Second</bb-tab-ui>
<bb-tab-ui>Third</bb-tab-ui>
</bb-tab-group-ui>
</div>
Tab container classes
For complete tab layouts with content panels, use the tab container utility class:
Use the bb-tabs-container__tabs class to add proper bottom spacing below the tabs.
<!-- Tab container with proper spacing -->
<div class="bb-tabs-container__tabs">
<bb-tab-group-ui [initialSelection]="0" (select)="onTabSelect($event)">
<bb-tab-ui>First</bb-tab-ui>
<bb-tab-ui>Second</bb-tab-ui>
<bb-tab-ui>Third</bb-tab-ui>
</bb-tab-group-ui>
</div>
<div class="tab-main-content">
<div *ngIf="selectedIndex === 0">First tab content</div>
<div *ngIf="selectedIndex === 1">Second tab content</div>
<div *ngIf="selectedIndex === 2">Third tab content</div>
</div>
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 tab component includes comprehensive keyboard navigation and ARIA support:
- The tab group uses role="tablist" to identify it as a tab interface
- Each tab button uses role="tab" to identify it as a tab control
- Active tabs are marked with aria-selected="true"
- Disabled tabs have tabindex="-1" to remove them from tab order
- Arrow key navigation is supported (Left/Right arrows move between tabs)
- The component automatically handles focus management when navigating with keyboard
Keyboard navigation
|
Key |
Actions |
|---|---|
|
ArrowRight → |
Moves focus to the next enabled tab |
|
ArrowLeft ← |
Moves focus to the previous enabled tab |
|
Tab ⇥ |
Moves focus to the next focusable element outside the tab group |
The component automatically skips disabled tabs when navigating with arrow keys and wraps around from the last tab to the first tab (and vice versa).