Tabs
Table of Contents
Installation
Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-tabsCSS imports
In your top-level stylesheet, add these imports:
@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';CSS resources
Load the needed font families by adding this link to the <head> of your application:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">Usage
In its most simple form this must consist of a collection with at least one tab:
<ts-tab-collection>
<ts-tab label="First">Content 1</ts-tab>
</ts-tab-collection>Label alignment
There are four horizontal layout options for tab labels.
| Position | Description |
|---|---|
start |
Align tab labels to the left (default) |
center |
Center tab labels to content |
end |
Align tab labels to the right |
stretch |
Force tab labels to fill all available space |
<ts-tab-collection headerPosition="stretch">
...
</ts-tab-collection>Header position
The collection of tab labels are positioned above the tab content by default. This can be inverted so the labels appear below the tab content:
<ts-tab-collection headerPosition="below">
...
</ts-tab-collection>Dynamically insert a tab
Tabs can be dynamically added and removed by using a loop to generate the tabs:
<ts-tab-collection>
<ts-tab *ngFor="let tab of myTabs; let index = index" [label]="tab">
Content for {{ tab }} tab
</ts-tab>
</ts-tab-collection>Or by showing and hiding via ngIf:
<ts-tab-collection>
<ts-tab label="First">
Content 1
</ts-tab>
<ts-tab label="Second" *ngIf="shouldIncludeTab">
Content 2
</ts-tab>
</ts-tab-collection>Custom label template
If label customization is needed a template can be defined to contain custom label markup by using the tsTabLabel directive on an
ng-template tag:
<ts-tab-collection>
<ts-tab>
<ng-template tsTabLabel>
<ts-icon>home</ts-icon>
First
</ng-template>
Content 1
</ts-tab>
</ts-tab-collection>Lazy load tab content
By default tab content is eagerly loaded. Tab content can be lazily loaded by using the tsTabContent directive on an ng-template tag:
<ts-tab-collection>
<ts-tab label="First">
<ng-template tsTabContent>
Content 1
</ng-template>
</ts-tab>
</ts-tab-collection>Events
| Event | Description | Payload |
|---|---|---|
animationFinished |
Fired when the tab animation is finished | void |
focusChange |
Fired when the tab labels focus changes | TsTabChangeEvent |
selectedIndexChange |
Fired when the index of the selected tab changes | number |
selectedTabChange |
Fired when the selected tab changes | TsTabChangeEvent |
<ts-tab-collection (selectedTabChange)="whenTabChanges($event)">
...
</ts-tab-collection>The TsTabChangeEvent structure:
class TsTabChangeEvent {
constructor(
// The tab's current index
public index: number,
// The tab
public tab: TsTabComponent,
) {}
}