Tile

A tile is a clickable area and represents e.g. entities.

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

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.

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

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.

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

Themes and Colors

The tile component can be colored according to the page's theme.

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