Barista - Expandable panel

The expandable panel component provides basic expand/collapse functionality without any styling. The expandable trigger directive dtExpandablePanel allows you to bind a custom element as trigger to an expandable panel <dt-expandable-panel>. The expandable trigger binds to key and click events.

<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 [dtExpandablePanel]="panel">Toggle expandable panel</button>

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, BrowserAnimationsModule],
})
class MyModule {}

Initialization

To apply the Dynatrace expandable panel, use the <dt-expandable-panel> element.

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.

Inputs

Name	Type	Default	Description
`expanded`	`boolean`	`false`	Sets or gets the panel's expanded state.
`disabled`	`boolean`	`false`	Sets or gets the panel's disabled state.
`id`	`string`	`dt-expandable-panel-{rollingNumber}`	Sets the id of the expandable panel.

Outputs

Name	Type	Description
`expandChange`	`EventEmitter<boolean>`	Emits an event when the expanded state changes.
`expanded`	`EventEmitter<void>`	Event emitted when the panel is expanded.
`collapsed`	`EventEmitter<void>`	Event emitted when the panel is collapsed.

Properties

Name	Type	Description
`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 input

Name	Type	Default	Description
`dtExpandablePanel`	`DtExpandablePanel`	`undefined`	Attaches an expandable panel to this trigger.

Expandable panel in use

Disabled

The expandable panel can be disabled, which also disables the trigger button.

<dt-expandable-panel #panel disabled [expanded]="true">
  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 [dtExpandablePanel]="panel">Toggle expandable panel</button>

Dynamic trigger

The expandable panel's trigger can be updated according to the panel's current state.

<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 [dtExpandablePanel]="panel">
  Toggle trigger (
  <span *ngIf="panel.expanded">close panel</span>
  <span *ngIf="!panel.expanded">open panel</span>
  )
</button>

Programmatic trigger

The expandable panel can be opened/closed/toggled programmatically.

<dt-expandable-panel #panel [expanded]="true"> {{ text }} </dt-expandable-panel>
<button dt-button (click)="panel.toggle()">Toggle panel</button>
<button dt-button (click)="panel.open()" [disabled]="panel.expanded">
  Open panel
</button>
<button dt-button (click)="panel.close()" [disabled]="!panel.expanded">
  Close panel
</button>