Tag

A tag allows users to mark entities with custom labels and keywords to be able to better organize and filter them. Custom tags can be created manually, whereas autogenerated tags are created by a system and can not be edited.

´ Loading interactive demo...
<dt-tag>Hello tag</dt-tag> export class DefaultTagExampleComponent { } <dt-tag>Hello tag</dt-tag> export class DefaultTagExampleComponent { }

States

Tags can be disabled.

´ Loading interactive demo...
<dt-tag disabled>Disabled tag</dt-tag> export class DisabledTagExampleComponent { } <dt-tag disabled>Disabled tag</dt-tag> export class DisabledTagExampleComponent { }

Variants

Removable tag

´ Loading interactive demo...
<dt-tag removable>This can be removed</dt-tag> export class RemovableTagExampleComponent { } <dt-tag removable>This can be removed</dt-tag> export class RemovableTagExampleComponent { }

Autogenerated tag

Autogenerated tags cannot be removed.

´ Loading interactive demo...
<dt-tag><dt-tag-key>[My key]:</dt-tag-key>My value</dt-tag> export class KeyTagExampleComponent { } <dt-tag><dt-tag-key>[My key]:</dt-tag-key>My value</dt-tag> export class KeyTagExampleComponent { }

Behavior

To extend a list of tags use the add tag button.

Add tag button

Add tag button

Distances

x: 8px
y: 4px
z: 12px

Button

height: 24px
width: 86px
border: 1px solid $turquoise-600 //inside
border-radius: 12px

Icon

Plus icon
width: 16px
height: 16px
icon-color: $turquoise-600

Font

font-family: Bernina Sans Regular
font-size: 12px
color: $turquoise-600

On trigger of the add tag button, a context dialog replaces the button (the font stays in the same position). The panel holds an input field and an add button.

Adding a tag overlay

Overlay

width: 320px
height: 78px
border: 1px solid $gray-700 //inside
border-radius: 3px
background-color: $gray-700
padding: 8px

Icon

Plus icon
width: 16px
height: 16px
icon-color: #fff
margin-right: 4px

Add tag font

font-family: Bernina Sans Regular
font-size: 12px
color: #fff

Input field

Input field
margin-top: 16px
margin-right: 8px

Add button

Primary button on dark background

The dt-tag wraps text or key-value pairs. A tag can be an interactive element.

Imports

You have to import the DtTagModule when you want to use the dt-tag:

@NgModule({
  imports: [
    DtTagModule,
  ],
})
class MyModule {}

Initialization

To use the Dynatrace tag, use the <dt-tag> element.

In addition, also other selectors can be used.

  • <dt-tag> or [dt-tag] or [dtTag] - To create the tag itself. Attribute selectors can be used on an anchor tag for example.
  • <dt-tag-key> or [dt-tag-key] or [dtTagKey] - To identify a content child as a key/attribute for the tag.
´ Loading interactive demo...
<dt-tag>Hello tag</dt-tag> export class DefaultTagExampleComponent { } <dt-tag>Hello tag</dt-tag> export class DefaultTagExampleComponent { }

Inputs

Name Type Default Description
disabled boolean | undefined undefined Sets disable state if property is set and the value is truthy or undefined.
removable boolean false If this is set to true, the tag can be removed by the user by clicking the abort icon.
value T undefined This can be used to bind a specific value to a tag.

Outputs

Name Type Default Description
removed event<T> This event is fired, when the user triggers the abort icon.

Examples

Disabled state

´ Loading interactive demo...
<dt-tag disabled>Disabled tag</dt-tag> export class DisabledTagExampleComponent { } <dt-tag disabled>Disabled tag</dt-tag> export class DisabledTagExampleComponent { }

Removable state

´ Loading interactive demo...
<dt-tag removable>This can be removed</dt-tag> export class RemovableTagExampleComponent { } <dt-tag removable>This can be removed</dt-tag> export class RemovableTagExampleComponent { }

With key/category

´ Loading interactive demo...
<dt-tag><dt-tag-key>[My key]:</dt-tag-key>My value</dt-tag> export class KeyTagExampleComponent { } <dt-tag><dt-tag-key>[My key]:</dt-tag-key>My value</dt-tag> export class KeyTagExampleComponent { }

Interactive example

´ Loading interactive demo...
<div> <dt-tag [removable]="canRemove" [disabled]="disabled" [value]="value1" (removed)="doRemove(tag1)" #tag1 title="My custom tooltip"> <dt-tag-key *ngIf="hasKey">[AWS]OSType:</dt-tag-key> Windows </dt-tag> <dt-tag [removable]="canRemove" [disabled]="disabled" [value]="value2" (removed)="doRemove(tag2)" #tag2 title="Another tooltip"> <dt-tag-key *ngIf="hasKey">[AWS]Category:</dt-tag-key> Managed </dt-tag> </div> <button dt-button (click)="canRemove=!canRemove" [variant]="canRemove ? 'primary' : 'secondary'">Toggle removable</button> <button dt-button (click)="disabled=!disabled" [variant]="disabled ? 'primary' : 'secondary'">Toggle disabled</button> <button dt-button (click)="hasKey=!hasKey" [variant]="hasKey ? 'primary' : 'secondary'">Toggle key</button> export class InteractiveTagExampleComponent { value1 = 'My value 1'; value2 = 'My value 2'; disabled = false; canRemove = false; hasKey = false; doRemove(tag: DtTag<string>): void { window.alert(`Tag removed: ${tag.value}`); } } <div> <dt-tag [removable]="canRemove" [disabled]="disabled" [value]="value1" (removed)="doRemove(tag1)" #tag1 title="My custom tooltip"> <dt-tag-key *ngIf="hasKey">[AWS]OSType:</dt-tag-key> Windows </dt-tag> <dt-tag [removable]="canRemove" [disabled]="disabled" [value]="value2" (removed)="doRemove(tag2)" #tag2 title="Another tooltip"> <dt-tag-key *ngIf="hasKey">[AWS]Category:</dt-tag-key> Managed </dt-tag> </div> <button dt-button (click)="canRemove=!canRemove" [variant]="canRemove ? 'primary' : 'secondary'">Toggle removable</button> <button dt-button (click)="disabled=!disabled" [variant]="disabled ? 'primary' : 'secondary'">Toggle disabled</button> <button dt-button (click)="hasKey=!hasKey" [variant]="hasKey ? 'primary' : 'secondary'">Toggle key</button> export class InteractiveTagExampleComponent { value1 = 'My value 1'; value2 = 'My value 2'; disabled = false; canRemove = false; hasKey = false; doRemove(tag: DtTag<string>): void { window.alert(`Tag removed: ${tag.value}`); } }