A tile is a clickable area and represents e.g. entities. Tiles can contain other components.

<dt-tile>
  <dt-tile-icon><dt-icon name="user-uem"></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>

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.

<dt-tile>
  <dt-tile-icon><dt-icon name="user-uem"></dt-icon></dt-tile-icon>
  <dt-tile-title>L-W8-64-APMDay3</dt-tile-title>
  Network traffic
</dt-tile>

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
  • warning
  • 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.

<dt-tile disabled="true">
  <dt-tile-icon><dt-icon name="user-uem"></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>

Themes and Colors

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

<dt-tile color="main">
  <dt-tile-icon><dt-icon name="user-uem"></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>

Warning Tile

<dt-tile color="warning">
  <dt-tile-icon><dt-icon name="user-uem"></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>

Recovered Tile

<dt-tile color="recovered">
  <dt-tile-icon><dt-icon name="user-uem"></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>

Error Tile

<dt-tile color="error">
  <dt-tile-icon><dt-icon name="user-uem"></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>