Expandable section | Barista Design System

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 ExpandableSectionDefaultExample { 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>

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 ExpandableSectionDisabledExample { 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>

Expandable section on dark background

Loading interactive demo...

<div class="dark" dtTheme=":dark"> <dt-expandable-section> <dt-expandable-section-header> My header text </dt-expandable-section-header> 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> </div>

export class ExpandableSectionDarkExample {}

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 based on the expandable panel but contains a header (<dt-expandable-section-header>), which is the trigger of the expandable panel.

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.

Attribute	Description
`dt-expandable-section`	The expandable section.
`dt-expandable-section-header`	The component, which contains the content of the header.

Loading interactive demo...

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

Options & Properties

Inputs

Name	Type	Default	Description
`expanded`	`boolean`	`false`	Sets or gets the section's expanded state.
`disabled`	`boolean`	`false`	Sets or gets the section's disabled state.

Outputs

Name	Type	Description
`expandChange`	`Observable<boolean>`	Emits an event when the expanded state changes.
`expanded`	`Observable<boolean>`	Event emitted when the panel is expanded.
`collapsed`	`Observable<boolean>`	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.

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 ExpandableSectionOpenExample { 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>

Disabled

Loading interactive demo...

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

Interactive

Loading interactive demo...

<dt-expandable-section #section [disabled]="sectionDisabled"> <dt-expandable-section-header> My header text </dt-expandable-section-header> {{ text }} </dt-expandable-section> <button dt-button (click)="section.open()" [disabled]="section.expanded || sectionDisabled" > Open </button> <button dt-button (click)="section.close()" [disabled]="!section.expanded || sectionDisabled" > Close </button> <button dt-button (click)="section.toggle()" [disabled]="sectionDisabled"> Toggle </button> <button dt-button (click)="sectionDisabled = !sectionDisabled"> Disable / Enable </button>

export class ExpandableSectionInteractiveExample { 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.`; sectionDisabled = false; }

Dark background

Loading interactive demo...

export class ExpandableSectionDarkExample {}