Tabs

Tabs are used to switch between different views.

The first tab is always preselected. This component is themable.

´ Loading interactive demo...
<dt-tab-group> <dt-tab disabled> <ng-template dtTabLabel>Traffic</ng-template> <ng-template dtTabContent> <h1>Traffic</h1> </ng-template> </dt-tab> <dt-tab> <ng-template dtTabLabel>Packets</ng-template> <ng-template dtTabContent> <h1>Packets</h1> </ng-template> </dt-tab> <dt-tab color="error"> <ng-template dtTabLabel>Quality</ng-template> <ng-template dtTabContent> <h1>Quality</h1> </ng-template> </dt-tab> <dt-tab color="recovered"> <ng-template dtTabLabel>Connectivity</ng-template> <ng-template dtTabContent> <h1>Connectivity</h1> </ng-template> </dt-tab> </dt-tab-group> export class DefaultTabsExampleComponent { } Traffic

Traffic

Packets

Packets

Quality

Quality

Connectivity

Connectivity

export class DefaultTabsExampleComponent { }

Styleguide

Chart tabs

The metrics displayed in the chart can be switched by tabs above the chart. These tabs can contain single metrics or metric groups (e.g. response time and requests).

Chart tabs

Chart tab styling

Default

font-color: main theme color
font-family: Bernina Sans Regular
font-size: 14px
height: 32px
width: depends on text
border-color: $gray-300
border-width: 1px
border-radius: 3px //only outside corners
padding-left: 12px
padding-right: 12px
vertical-align: center

Margin

x: 8px

States

Chart tab hover state

Hover

font-color: theme hover color
border-color: theme hover color
fill: $gray-100

Active

font-family: Bernina Sans Regular
font-size: 14px
font-color: theme color shade 700
height: 32px
width: depends on text
border-color: theme color shade 700
border-width: 1px
border-radius: 3px //only outside corners
fill: $gray-100
padding-left: 12px
padding-right: 12px
vertical-align: center

Dos and don'ts

Abbreviation of long tab names

Do

Do - abbreviate with ...
Abbreviate long names with "..."

Don't

Don't - use multiple lines
Don't use more than one line for tabs.

Single tabs

Do

Do - use headline instead of tab
If there is only one tab, use a headline instead of a tab.

Don't

Don't - use a single tab
Don't use one single tab, a minimum of two tabs is required.

Problem indicator

If content in a tab is problematic, the tab box, as well as the text are red.

´ Loading interactive demo...
<dt-tab-group> <dt-tab> <ng-template dtTabLabel>Physical <em>CPU</em></ng-template> <ng-template dtTabContent> <h1>Physical CPUs content</h1> </ng-template> </dt-tab> <dt-tab> <ng-template dtTabLabel>CPU ready time</ng-template> <ng-template dtTabContent> <h1>cpu-ready-time content</h1> </ng-template> </dt-tab> <dt-tab *ngIf="hasProblems" color="error"> <ng-template dtTabLabel>11 problems</ng-template> <ng-template dtTabContent> <h1>Housten we have 11 problems!</h1> </ng-template> </dt-tab> </dt-tab-group> <button dt-button (click)="hasProblems=!hasProblems">Toggle problems</button> export class DynamicTabsExampleComponent { hasProblems = false; } Physical CPU

Physical CPUs content

CPU ready time

cpu-ready-time content

11 problems

Housten we have 11 problems!

export class DynamicTabsExampleComponent { hasProblems = false; }

Tabs

´ Loading interactive demo...
<dt-tab-group> <dt-tab disabled> <ng-template dtTabLabel>Traffic</ng-template> <ng-template dtTabContent> <h1>Traffic</h1> </ng-template> </dt-tab> <dt-tab> <ng-template dtTabLabel>Packets</ng-template> <ng-template dtTabContent> <h1>Packets</h1> </ng-template> </dt-tab> <dt-tab color="error"> <ng-template dtTabLabel>Quality</ng-template> <ng-template dtTabContent> <h1>Quality</h1> </ng-template> </dt-tab> <dt-tab color="recovered"> <ng-template dtTabLabel>Connectivity</ng-template> <ng-template dtTabContent> <h1>Connectivity</h1> </ng-template> </dt-tab> </dt-tab-group> export class DefaultTabsExampleComponent { } Traffic

Traffic

Packets

Packets

Quality

Quality

Connectivity

Connectivity

export class DefaultTabsExampleComponent { }

The <dt-tab-group> creates wraps a group of <dt-tab> components. Each tab gets a label and a content respectively. The label is provided with a ng-template with the directive dtTabLabel. The content is also declared with a ng-template, but with a directive called dtTabContent. By default the first enabled tab gets selected if no selected tab is specified.

Imports

You have to import the DtTabsModule when you want to use the <dt-tab-group>:

@NgModule({
  imports: [
    DtTabsModule,
  ],
})
class MyModule {}

Initialization

To use the dynatrace tabs, add the following components/directives:

Attribute Description
dt-tab-group wrapping container for dt-tabs
dt-tab definition for one tab containing a label and content
ng-template dtTabLabel label definition for one tab
ng-template dtTabContent content definition for one tab

Options & Properties

DtTabGroup

Name Type Default Description
@Ouput() selectionChanged EventEmitter<DtTabChange> Event emitted when the selected tab changes, includes the selected tab instance

DtTab

Name Type Default Description
selected boolean | undefined undefined Sets the selected state if property is set and the value is truthy or undefined
disabled boolean | undefined undefined Sets disable state if property is set and the value is truthy or undefined
color string | undefined main Sets color. Possible options:
  • main (default)
  • recovered
  • error
tabindex number 0 Tabindexof the tab.
id string The id of the tab.
aria-label string Aria label of the tab.

Tabgroups come with support for storing the selected tab for navigation purposes. You can enable navigation for a dt-tab-group by adding the dtTabGroupNavigation directive. The selected tab gets stored only on user interaction. If an id of a dt-tab matches an id stored inside the DtTabNavigationAdapter the tab gets selected. Ids stored in the DtTabNavigationAdapter take presedence over the selected attribute on the dt-tab component.

<dt-tab-group dtTabGroupNavigation>
  <dt-tab id="traffic">
    <ng-template dtTabLabel>Traffic</ng-template>
    <ng-template dtTabContent>
      <h1>Traffic</h1>
    </ng-template>
  </dt-tab>
  <dt-tab id="quality">
    <ng-template dtTabLabel>Quality</ng-template>
    <ng-template dtTabContent>
      <h1>Quality</h1>
    </ng-template>
  </dt-tab>
</dt-tab-group>

The DtTabModule comes with a DtTabRouterFragmentAdapter service that stores the id of the selected dt-tab inside the url fragment. If you want to implement your own logic of storing the selected tab ids, e.g. in localStorage - you need to implement the abstract class DtTabNavigationAdapter yourself.

Make sure to provide a DtTabNavigationAdapter with its dependencies in the root of your application. E.g.

...
providers: [
  { provide: DtTabNavigationAdapter,
    useClass: DtTabRouterFragmentAdapter,
    deps: [Router, ActivatedRoute, Location, LocationStrategy],
  },
],
...

Theming

The button styling depends on the theme the component is in. You can set a theme on an area of the app by using the dtTheme directive.

Examples

Dynamic Tabs

´ Loading interactive demo...
<dt-tab-group> <dt-tab> <ng-template dtTabLabel>Physical <em>CPU</em></ng-template> <ng-template dtTabContent> <h1>Physical CPUs content</h1> </ng-template> </dt-tab> <dt-tab> <ng-template dtTabLabel>CPU ready time</ng-template> <ng-template dtTabContent> <h1>cpu-ready-time content</h1> </ng-template> </dt-tab> <dt-tab *ngIf="hasProblems" color="error"> <ng-template dtTabLabel>11 problems</ng-template> <ng-template dtTabContent> <h1>Housten we have 11 problems!</h1> </ng-template> </dt-tab> </dt-tab-group> <button dt-button (click)="hasProblems=!hasProblems">Toggle problems</button> export class DynamicTabsExampleComponent { hasProblems = false; } Physical CPU

Physical CPUs content

CPU ready time

cpu-ready-time content

11 problems

Housten we have 11 problems!

export class DynamicTabsExampleComponent { hasProblems = false; }

Interactive Tabs

´ Loading interactive demo...
<dt-tab-group> <dt-tab [disabled]="disableFirst"> <ng-template dtTabLabel>Traffic</ng-template> <ng-template dtTabContent> <h1>Traffic</h1> </ng-template> </dt-tab> <dt-tab [color]="simulatedColor" selected> <ng-template dtTabLabel>Connectivity {{connectivity}}</ng-template> <ng-template dtTabContent> <h1>Connectivity</h1> </ng-template> </dt-tab> </dt-tab-group> <button dt-button (click)="disableFirst=!disableFirst">Toggle disable for first tab</button> <button dt-button [disabled]="simulationRunning" (click)="simulateError()">Simulate Error</button> export class InteractiveTabsExampleComponent { simulatedColor = 'main'; simulationRunning = false; disableFirst = false; connectivity = '100%'; simulateError(): void { this.simulatedColor = 'error'; this.simulationRunning = true; this.connectivity = '30%'; // tslint:disable-next-line:no-magic-numbers timer(1000, 1000) // tslint:disable-next-line:no-magic-numbers .pipe(take(2)) .subscribe( () => { this.simulatedColor = this.simulatedColor === 'error' ? 'recovered' : 'main'; this.connectivity = '80%'; }, undefined, () => { this.simulationRunning = false; this.connectivity = '100%'; }); } } Traffic

Traffic

Connectivity {{connectivity}}

Connectivity

export class InteractiveTabsExampleComponent { simulatedColor = 'main'; simulationRunning = false; disableFirst = false; connectivity = '100%'; simulateError(): void { this.simulatedColor = 'error'; this.simulationRunning = true; this.connectivity = '30%'; // tslint:disable-next-line:no-magic-numbers timer(1000, 1000) // tslint:disable-next-line:no-magic-numbers .pipe(take(2)) .subscribe( () => { this.simulatedColor = this.simulatedColor === 'error' ? 'recovered' : 'main'; this.connectivity = '80%'; }, undefined, () => { this.simulationRunning = false; this.connectivity = '100%'; }); } }