An info group (<dt-info-group>
) is used to show data in a simple way. It's a
visual container for combining an icon with two lines of text (title and
content). It often comes with multiple instances of itself to give a quick
overview and summarize content, e.g. inside a table cell.
The textual content could be a link, otherwise the info group has no interactivity. The color of the icon is themeable. The width is defined by the space that is left.
<dt-info-group>
<dt-info-group-icon>
<dt-icon name="user-uem"></dt-icon>
</dt-info-group-icon>
<dt-info-group-title>5 min 30 s</dt-info-group-title>
Session duration
</dt-info-group>
Imports
You have to import the DtInfoGroupModule
when you want to use the
<dt-info-group>
:
@NgModule({
imports: [DtInfoGroupModule],
})
class MyModule {}
Basic setup
In addition to the custom content, the info-group can also hold some special sections (directives):
<dt-info-group-title>
- The title of this info group.<dt-info-group-icon>
- The icon on the left of the info group is themeable.