Tile

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

States

Tiles have a default, hover, active, focus and disabled state. 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 TileDisabledExample {} <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 TileDisabledExample {}

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

Dashboard tile

Dashboard tile without chart

Dashboard tile with chart

Examples of multiple tiles

Multiple list tiles

Multiple dashboard tiles

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

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.

Examples

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

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

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

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

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