Expandable section

Tagged with expandable expandable section

The expandable section is used to show and hide 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.`; }

My header text {{ text }}

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.`; }

My header text {{ text }}

Combination with other components

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

Expandable section

This Angular component provides basic expand/collapse functionality with a header. A <dt-expandable-section> element should be used whenever some action is performed. It has to contain a <dt-expandable-section-header> which contains the header content.

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

Imports

You have to import the DtExpandableSectionModule when you want to use the dt-expandable-section:


@NgModule({
  imports: [
    DtExpandableSectionModule,
  ],
})
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>

My header text {{ text }}

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.`; }

My header text {{ text }}

Disabled

Loading interactive demo...

<dt-expandable-section disabled> <dt-expandable-section-header>My header text</dt-expandable-section-header> {{ text }} </dt-expandable-section>

My header text {{ text }}

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; }

My header text {{ text }}