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:
|
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>