Show more

The show more component is used to split long lists of items into smaller sets and load them one by one.

´ Loading interactive demo...
<dt-show-more [showLess]="showLess" (changed)="showLess = !showLess"> Show more <dt-show-less-label>Show less</dt-show-less-label> </dt-show-more> export class ShowMoreDefaultExample { showLess = false; } <dt-show-more [showLess]="showLess" (changed)="showLess = !showLess"> Show more <dt-show-less-label>Show less</dt-show-less-label> </dt-show-more> export class ShowMoreDefaultExample { showLess = false; }

Show more on dark background

´ Loading interactive demo...
<section class="dark" dtTheme=":dark"> <dt-show-more [showLess]="showLess" (changed)="showLess = !showLess"> Toggle more/less </dt-show-more> </section> export class ShowMoreDarkExample { showLess = false; } <section class="dark" dtTheme=":dark"> <dt-show-more [showLess]="showLess" (changed)="showLess = !showLess"> Toggle more/less </dt-show-more> </section> export class ShowMoreDarkExample { showLess = false; }

Behavior

As the list is divided into equal parts, the button shows the number of entries of the next part, if possible. As soon as there are no more entries available, the show more button is hidden. Once expanded, the list cannot be collapsed anymore without a full page reload.

Another variant of the paging behavior - loading more items if not everything is visible initially - is the pagination component.

Show more in use

Show more distances
x: 20px
y: 8px

This component creates a show more pagination widget.

Imports

You have to import the DtShowMoreModule when you want to use the dt-show-more:

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

Initialization

To apply the dynatrace show more component, use the <dt-show-more> element with some content as text. To use a Show less label an additional <dt-show-less-label> tag can be used.

Options & Properties

Button group

Name Type Default Description
<ng-content> The (optional) text which gets displayed above the arrow.
[showLess] boolean true The property which stores the expanded state of the component. If the value is true, then the arrow of the component is pointing downwards.
[tabIndex] number 0 Sets and gets the tabIndex property.
(changed) event<void> The event which gets fired when the state changes. The event is fired when the user clicks on the component, as well as using SPACE or ENTER keys.

Examples

Default

´ Loading interactive demo...
<dt-show-more [showLess]="showLess" (changed)="showLess = !showLess"> Show more <dt-show-less-label>Show less</dt-show-less-label> </dt-show-more> export class ShowMoreDefaultExample { showLess = false; } <dt-show-more [showLess]="showLess" (changed)="showLess = !showLess"> Show more <dt-show-less-label>Show less</dt-show-less-label> </dt-show-more> export class ShowMoreDefaultExample { showLess = false; }

Without text

´ Loading interactive demo...
<dt-show-more [showLess]="showLess" (changed)="showLess=!showLess" aria-label="Show more data"></dt-show-more> export class ShowMoreNoTextExample { showLess = false; } <dt-show-more [showLess]="showLess" (changed)="showLess=!showLess" aria-label="Show more data"></dt-show-more> export class ShowMoreNoTextExample { showLess = false; }

Interactive example

´ Loading interactive demo...
<dt-show-more [showLess]="showLess" #dtShowMore (changed)="showLess = !showLess" > Show more <dt-show-less-label>Show less</dt-show-less-label> </dt-show-more> <button dt-button (click)="showLess = !showLess" [variant]="showLess ? 'primary' : 'secondary'" > Toggle more </button> export class ShowMoreInteractiveExample { showLess = false; } <dt-show-more [showLess]="showLess" #dtShowMore (changed)="showLess = !showLess" > Show more <dt-show-less-label>Show less</dt-show-less-label> </dt-show-more> <button dt-button (click)="showLess = !showLess" [variant]="showLess ? 'primary' : 'secondary'" > Toggle more </button> export class ShowMoreInteractiveExample { showLess = false; }

Dark theme

´ Loading interactive demo...
<section class="dark" dtTheme=":dark"> <dt-show-more [showLess]="showLess" (changed)="showLess = !showLess"> Toggle more/less </dt-show-more> </section> export class ShowMoreDarkExample { showLess = false; } <section class="dark" dtTheme=":dark"> <dt-show-more [showLess]="showLess" (changed)="showLess = !showLess"> Toggle more/less </dt-show-more> </section> export class ShowMoreDarkExample { showLess = false; }

Disabled

´ Loading interactive demo...
<dt-show-more [disabled]="true"> Show more </dt-show-more> export class ShowMoreDisabledExample {} <dt-show-more [disabled]="true"> Show more </dt-show-more> export class ShowMoreDisabledExample {}