Tile

Tile details

Available in Groundhog

This component is themable.

A tile is a clickable area and represents 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 { } <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 { }

States

Tiles have a default, hover, active, focus and disabled state as shown in the example above. The following example shows the disabled state.

´ 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 { } <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 { }

Variants

List 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 { } <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 { }

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,... 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.

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

´ 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 { } <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 { }

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 custom content, the tile also holds the following sections:

  • <dt-tile-title> - The title of this tile, needs to be defined to show the tile's header. It contains text only.
  • <dt-tile-subtitle> - Right below the title, a subtitle can be placed. It contains text only.
  • <dt-tile-icon> - An icon in the top left corner of the tile.

If only a <dt-tile-title> and no <dt-tile-subtitle> is given, the tile will be rendered in a smaller version.

Inputs

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 0 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 { } <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 { }

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 { } <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 { }

Themed 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 { } <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 { }

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 { } <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 { }

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 { } <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 { }