Expandable section

The expandable section is used to show and hide context information.

´ Loading interactive demo...
<dt-expandable-section> <dt-expandable-section-header>My header text</dt-expandable-section-header> {{ text }} </dt-expandable-section> export class DefaultExpandableSectionExampleComponent { 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-section> <dt-expandable-section-header>My header text</dt-expandable-section-header> {{ text }} </dt-expandable-section> export class DefaultExpandableSectionExampleComponent { 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.`; }

States

The expandable section has a default, hover, active, focus and disabled state, as shown in the example above. The following examples shows a disabled expandable section.

´ Loading interactive demo...
<dt-expandable-section disabled> <dt-expandable-section-header>My header text</dt-expandable-section-header> {{ text }} </dt-expandable-section> export class DisabledExpandableSectionExampleComponent { 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-section disabled> <dt-expandable-section-header>My header text</dt-expandable-section-header> {{ text }} </dt-expandable-section> export class DisabledExpandableSectionExampleComponent { 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.`; }

Expandable section on dark background

Expandable section dark background

Expandable section in use

Currently, the expandable section is used in combination with several components, e.g. Tags

This Angular component provides basic expand/collapse functionality with a header. It has to contain a <dt-expandable-section-header> which contains the header content.

Imports

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


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

Initialization

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

´ Loading interactive demo...
<dt-expandable-section> <dt-expandable-section-header>My header text</dt-expandable-section-header> {{ text }} </dt-expandable-section> export class DefaultExpandableSectionExampleComponent { 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-section> <dt-expandable-section-header>My header text</dt-expandable-section-header> {{ text }} </dt-expandable-section> export class DefaultExpandableSectionExampleComponent { 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.`; }
Attribute Description
dt-expandable-section The expandable section
dt-expandable-section-header The component which contains the content of the header.

Options & Properties

Expandable section description

Name Type Default Description
[opened] boolean false Sets or gets the opened state
[disabled] boolean false Sets or gets the disabled 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 section
close void Collapses the section

Examples

Open state by default

´ Loading interactive demo...
<dt-expandable-section [opened]="true"> <dt-expandable-section-header>My header text</dt-expandable-section-header> {{ text }} </dt-expandable-section> export class OpenExpandableSectionExampleComponent { 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-section [opened]="true"> <dt-expandable-section-header>My header text</dt-expandable-section-header> {{ text }} </dt-expandable-section> export class OpenExpandableSectionExampleComponent { 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.`; }

Disabled

´ Loading interactive demo...
<dt-expandable-section disabled> <dt-expandable-section-header>My header text</dt-expandable-section-header> {{ text }} </dt-expandable-section> export class DisabledExpandableSectionExampleComponent { 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-section disabled> <dt-expandable-section-header>My header text</dt-expandable-section-header> {{ text }} </dt-expandable-section> export class DisabledExpandableSectionExampleComponent { 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.`; }

Interactive

´ Loading interactive demo...
<dt-expandable-section #section1 [disabled]="section1disabled"> <dt-expandable-section-header>My header text</dt-expandable-section-header> {{ text }} </dt-expandable-section><br> <button dt-button (click)="section1.open()">Open</button> <button dt-button (click)="section1.close()">Close</button> <button dt-button (click)="section1.toggle()">Toggle</button> <button dt-button (click)="section1disabled = !section1disabled">Disabled / Enable</button> export class InteractiveExpandableSectionExampleComponent { 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.`; section1disabled = false; } <dt-expandable-section #section1 [disabled]="section1disabled"> <dt-expandable-section-header>My header text</dt-expandable-section-header> {{ text }} </dt-expandable-section><br> <button dt-button (click)="section1.open()">Open</button> <button dt-button (click)="section1.close()">Close</button> <button dt-button (click)="section1.toggle()">Toggle</button> <button dt-button (click)="section1disabled = !section1disabled">Disabled / Enable</button> export class InteractiveExpandableSectionExampleComponent { 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.`; section1disabled = false; }