Tile

A tile is a clickable area and represent e.g. entities. Tiles can contain other components. Currently, there are two types of tiles: list tiles and dashboard tiles.

´ Loading interactive demo...
<dt-tile> <dt-tile-icon><dt-icon name="agent"></dt-icon></dt-tile-icon> <dt-tile-title>L-W8-64-APMDay3</dt-tile-title> <dt-tile-subtitle>Linux (x84, 64-bit)</dt-tile-subtitle> Network traffic </dt-tile> export class DefaultTileExampleComponent { } L-W8-64-APMDay3 Linux (x84, 64-bit) Network traffic export class DefaultTileExampleComponent { }

List tiles

Small tile

´ Loading interactive demo...
<dt-tile> <dt-tile-icon><dt-icon name="agent"></dt-icon></dt-tile-icon> <dt-tile-title>L-W8-64-APMDay3</dt-tile-title> Network traffic </dt-tile> export class SmallTileExampleComponent { } L-W8-64-APMDay3 Network traffic export class SmallTileExampleComponent { }

Disabled tile

´ Loading interactive demo...
<dt-tile disabled="true"> <dt-tile-icon><dt-icon name="agent"></dt-icon></dt-tile-icon> <dt-tile-title>L-W8-64-APMDay3</dt-tile-title> <dt-tile-subtitle>Linux (x84, 64-bit)</dt-tile-subtitle> Network traffic </dt-tile> export class DisabledTileExampleComponent { } L-W8-64-APMDay3 Linux (x84, 64-bit) Network traffic export class DisabledTileExampleComponent { }

Dashboard tiles

These tiles are only used on dashboards (dark background). There are 3 sizes of dashboard tiles, full size, half size and quarter size. Quarter sized tiles are used for giving an overview, e.g. how many hosts, applications, web checks, etc. the environment contains. Whereas, the half and full sized tiles show a preview of a more specific part. All full and half sized tiles use theme colors to be recognized immediately. Please use the defined chart colors.

Dashboard tiles styleguide
font-familiy: Bernina Sans Regular
border-width: 1px
background-color: $gray-800
border-color: $gray-600
border-radius: 3px
padding: 20px
margin: 20px

Headline

font-size: 10px
line-height: 1.6
color: #fff
Line next to headline: 1px solid $gray-700

Subheadline

font-size: 12px
line-height: 1.6
color: #fff

Icon

height: 12px
width: 12px
fill: chart-dependent

Metric

font-size: 10px
line-height: 1.6
color: $gray-500
Line next to metric: 1px dotted $gray-700

Number

font-size: 14px
line-height: 1.6
color: #fff

Unit

font-size: 10px
line-height: 1.6
color: $gray-500

Hover

Dashboard tiles hover state
border-color: $turquoise-600

Active

Dashboard tiles active state
border-color: $turquoise-700

Disabled state

Dashboard tiles can't be disabled.

Animation

The tile component is not animated at all.

Multiple metrics shown in one dashboard tile

To make a chart with different metrics better understandable, related metrics should rotate in a carousel. Every step is visible for 4 seconds. The y-axis can show several units in a carousel too. Colored lines are in front of the gray lines.

Multiple metrics in one dashboard tile
First, all metrics are shown combined.
Multiple metrics in one dashboard tile
One metric is shown, the others are desaturated.

Examples of multiple tiles

Multiple list tiles

Multiple dashboard tiles

Tile

´ Loading interactive demo...
<dt-tile> <dt-tile-icon><dt-icon name="agent"></dt-icon></dt-tile-icon> <dt-tile-title>L-W8-64-APMDay3</dt-tile-title> <dt-tile-subtitle>Linux (x84, 64-bit)</dt-tile-subtitle> Network traffic </dt-tile> export class DefaultTileExampleComponent { } L-W8-64-APMDay3 Linux (x84, 64-bit) Network traffic export class DefaultTileExampleComponent { }

Imports

You have to import the DtTileModule when you want to use the dt-tile:

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

Initialization

<dt-tile> is a visual container for wrapping a wide variety of contents. In addition to the custom content, the tile can also hold some special sections:

  • <dt-tile-title> - The title of this tile, needs to be defined to show the tile's header
  • <dt-tile-subtitle> - Right below the title, a subtitle can be placed.
  • <dt-tile-icon> - An icon in the top left corner of the card. The icon can also be aligned to the right by setting align="end" on the dt-tile-icon **not ready yet:**Use <dt-icon> for it as soon as it is ready

If only a <dt-tile-title> and no <dt-tile-subtitle> the tile will be rendered in a small version

Options & Properties

Name Type Default Description
disabled boolean | undefined undefined Sets disable state if property is set and the value is truthy or undefined
color string | undefined undefined Sets color. Possible options:
  • main
  • error
  • recovered
tabindex number -1 Sets tabindex on the tile

Disabled Tile

´ Loading interactive demo...
<dt-tile disabled="true"> <dt-tile-icon><dt-icon name="agent"></dt-icon></dt-tile-icon> <dt-tile-title>L-W8-64-APMDay3</dt-tile-title> <dt-tile-subtitle>Linux (x84, 64-bit)</dt-tile-subtitle> Network traffic </dt-tile> export class DisabledTileExampleComponent { } L-W8-64-APMDay3 Linux (x84, 64-bit) Network traffic export class DisabledTileExampleComponent { }

Small Tile

´ Loading interactive demo...
<dt-tile> <dt-tile-icon><dt-icon name="agent"></dt-icon></dt-tile-icon> <dt-tile-title>L-W8-64-APMDay3</dt-tile-title> Network traffic </dt-tile> export class SmallTileExampleComponent { } L-W8-64-APMDay3 Network traffic export class SmallTileExampleComponent { }

Main Tile

´ Loading interactive demo...
<dt-tile color="main"> <dt-tile-icon><dt-icon name="agent"></dt-icon></dt-tile-icon> <dt-tile-title>L-W8-64-APMDay3</dt-tile-title> <dt-tile-subtitle>Linux (x84, 64-bit)</dt-tile-subtitle> Network traffic </dt-tile> export class MainTileExampleComponent { } L-W8-64-APMDay3 Linux (x84, 64-bit) Network traffic export class MainTileExampleComponent { }

Recovered Tile

´ Loading interactive demo...
<dt-tile color="recovered"> <dt-tile-icon><dt-icon name="agent"></dt-icon></dt-tile-icon> <dt-tile-title>L-W8-64-APMDay3</dt-tile-title> <dt-tile-subtitle>Linux (x84, 64-bit)</dt-tile-subtitle> Network traffic </dt-tile> export class RecoveredTileExampleComponent { } L-W8-64-APMDay3 Linux (x84, 64-bit) Network traffic export class RecoveredTileExampleComponent { }

Error Tile

´ Loading interactive demo...
<dt-tile color="error"> <dt-tile-icon><dt-icon name="agent"></dt-icon></dt-tile-icon> <dt-tile-title>L-W8-64-APMDay3</dt-tile-title> <dt-tile-subtitle>Linux (x84, 64-bit)</dt-tile-subtitle> Network traffic </dt-tile> export class ErrorTileExampleComponent { } L-W8-64-APMDay3 Linux (x84, 64-bit) Network traffic export class ErrorTileExampleComponent { }