Expandable panel

The expandable panel component is responsible for showing and hiding context information.

´ Loading interactive demo...
<dt-expandable-panel #panel> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </dt-expandable-panel> <button dt-button (click)="panel.toggle()">Toggle</button> export class DefaultExpandablePanelExampleComponent { } <dt-expandable-panel #panel> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </dt-expandable-panel> <button dt-button (click)="panel.toggle()">Toggle</button> export class DefaultExpandablePanelExampleComponent { }

Variants

The toggle can be any text or a button.

´ Loading interactive demo...
<dt-expandable-panel #panel1> Example panel </dt-expandable-panel> <br> <div [dtExpandablePanel]="panel1">Toggle</div> export class TriggerSimpleExpandablePanelExampleComponent {} <dt-expandable-panel #panel1> Example panel </dt-expandable-panel> <br> <div [dtExpandablePanel]="panel1">Toggle</div> export class TriggerSimpleExpandablePanelExampleComponent {}

This Angular component provides basic expand/collapse functionality without any styling. A <dt-expandable-panel> element should be used whenever some action is performed. The expandable trigger directive (dtExpandablePanel) allows you to bind a custom element as trigger to an expandable panel. The expandable trigger binds to key and click events.

Animation is done using Angular animations. So, don't forget to provide the animations module, too.

Imports

You have to import the DtExpandablePanelModule when you want to use the dt-expandable-panel. The dt-expandable-panel component also requires Angular's BrowserAnimationsModule for animations. For more details on this see Step 2: Animations in the Getting started Guide.

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

Initialization

To apply the dynatrace expandable panel, use the <dt-expandable-panel> element. Example:

´ Loading interactive demo...
<dt-expandable-panel #panel> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </dt-expandable-panel> <button dt-button (click)="panel.toggle()">Toggle</button> export class DefaultExpandablePanelExampleComponent { } <dt-expandable-panel #panel> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </dt-expandable-panel> <button dt-button (click)="panel.toggle()">Toggle</button> export class DefaultExpandablePanelExampleComponent { }
Attribute Description
dt-expandable-panel The expandable panel, with the behaviour, but without styling
[dtExpandablePanel]=#panel The expandable trigger which listens on click and key events. The trigger needs to get a panel assigned.

Options & Properties

Expandable panel description

Name Type Default Description
[opened] boolean false Sets or gets the opened state
(openedChange) event<boolean> Emits an event when the expanded state changes.
toggle boolean Toggles the expanded state, i.e. changes it to expanded, if collapsed, or vice-versa
open void Expands the panel
close void Collapses the panel

Expandable trigger

Name Type Default Description
[opened] boolean false Sets or gets the opened state
[dtExpandablePanel] DtExpandablePanel undefined Attaches the expandable panel to this trigger

Examples

Open state

´ Loading interactive demo...
<dt-expandable-panel #panel1 [opened]="true"> {{ text }} </dt-expandable-panel> <br> <button dt-button (click)="panel1.open()">Open</button><button dt-button (click)="panel1.close()">Close</button> export class OpenExpandablePanelExampleComponent { text = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.`; } <dt-expandable-panel #panel1 [opened]="true"> {{ text }} </dt-expandable-panel> <br> <button dt-button (click)="panel1.open()">Open</button><button dt-button (click)="panel1.close()">Close</button> export class OpenExpandablePanelExampleComponent { text = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.`; }

Simple trigger

´ Loading interactive demo...
<dt-expandable-panel #panel1> Example panel </dt-expandable-panel> <br> <div [dtExpandablePanel]="panel1">Toggle</div> export class TriggerSimpleExpandablePanelExampleComponent {} <dt-expandable-panel #panel1> Example panel </dt-expandable-panel> <br> <div [dtExpandablePanel]="panel1">Toggle</div> export class TriggerSimpleExpandablePanelExampleComponent {}

Styled trigger

´ Loading interactive demo...
<dt-expandable-panel #panel1> Example panel </dt-expandable-panel> <br> <div [dtExpandablePanel]="panel1" #trigger1="dtExpandablePanelTrigger"> Toggle trigger (<span *ngIf="trigger1.opened">Close</span><span *ngIf="!trigger1.opened">Open</span>) </div> export class TriggerExpandablePanelExampleComponent {} <dt-expandable-panel #panel1> Example panel </dt-expandable-panel> <br> <div [dtExpandablePanel]="panel1" #trigger1="dtExpandablePanelTrigger"> Toggle trigger (<span *ngIf="trigger1.opened">Close</span><span *ngIf="!trigger1.opened">Open</span>) </div> export class TriggerExpandablePanelExampleComponent {}