@terminus/ui-tabs NPM

Installation

Use the ng add command to quickly install all the needed dependencies:

ng add @terminus/ui-tabs

CSS 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,
  ) {}
}

tslib @angular-devkit/schematics @schematics/angular

@zalastax/nolb-_ter @infinitebrahmanuniverse/nolb-_ter @everything-registry/sub-chunk-905

2 years ago

3 years ago

3 years ago

3 years ago

4 years ago