Show more

The Show more button is the preferred and recommended variant of pagination.

´ 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 DefaultShowMoreExampleComponent { showLess = false; } Show more Show less export class DefaultShowMoreExampleComponent { showLess = false; }

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.

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 DarkThemeShowMoreExampleComponent { showLess = false; }
Toggle more/less
export class DarkThemeShowMoreExampleComponent { showLess = false; }

Distance to surrounding elements

Show more distances
x: 20px
y: 8px

Show More

This component create a show more pagination widget.

´ 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 DefaultShowMoreExampleComponent { showLess = false; } Show more Show less export class DefaultShowMoreExampleComponent { showLess = false; }

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

Without text

´ Loading interactive demo...
<dt-show-more [showLess]="showLess" (changed)="showLess=!showLess"></dt-show-more> export class NoTextShowMoreExampleComponent { showLess = false; } export class NoTextShowMoreExampleComponent { 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 InteractiveShowMoreExampleComponent { showLess = false; } Show more Show less export class InteractiveShowMoreExampleComponent { 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 DarkThemeShowMoreExampleComponent { showLess = false; }
Toggle more/less
export class DarkThemeShowMoreExampleComponent { showLess = false; }