The expandable section 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.
<dt-expandable-section>
<dt-expandable-section-header> My header text </dt-expandable-section-header>
{{ text }}
</dt-expandable-section>
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 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. |
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. |
id |
string |
dt-expandable-section-{rolling-number} |
Sets a unique id for the expandable section. |
In most cases the expandable section is closed by default, but it can also be
set to expanded
.
<dt-expandable-section [expanded]="true">
<dt-expandable-section-header> My header text </dt-expandable-section-header>
{{ text }}
</dt-expandable-section>
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. |
Methods
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. |
See all methods in action in the following example.
<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>
States
The expandable section's trigger has a default, hover, active, focus and disabled state. The following example shows a disabled expandable section.
<dt-expandable-section disabled>
<dt-expandable-section-header> My header text </dt-expandable-section-header>
{{ text }}
</dt-expandable-section>
Theming
The expandable section can be placed on a dark background.
<div class="dt-example-dark" dtTheme=":dark">
<div class="dt-example-variant">
<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>
<div class="dt-example-variant">
<h4>Disabled Expandable Section</h4>
<dt-expandable-section disabled>
<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>
</div>
Expandable section in use
Currently, the expandable section is used in combination with several components, e.g. Tags.